Theme 和 ThemeData — 是什么、原理和样式配置

什么是 Theme 和 ThemeData

ThemeData — 包含 Material 应用程序视觉样式完整描述的类。通过 theme 或 darkTheme 参数传递给 MaterialApp，并被所有子 widget 继承。每个 Material Design widget 使用 ThemeData 获取其样式：按钮颜色、AppBar 大小、文本样式、卡片边距和图标。

ThemeData 的基础是 ColorScheme，它定义了 primary、secondary、surface、error 和其他颜色。从这些颜色自动计算所有 Material 组件的状态（hover、focus、pressed）。例如，ElevatedButton 使用 primary 颜色作为背景，使用 onPrimary 作为文本——无需额外配置。

Theme widget — 是一个 InheritedWidget，将主题向下传播到 widget 树中。任何 widget 都可以通过 Theme.of(context) 获取当前主题，也可以通过 Theme.copyWith 或 ThemeData.copyWith 基于现有主题创建具有覆盖值的新主题。

结论：ThemeData — 应用程序样式的统一来源。从定义 ThemeData 开始开发——这设定了整个项目的视觉语言，并防止不同屏幕上的分散样式。

ColorScheme：调色板的基础

ColorScheme — Material 3 中主题化的核心元素。它取代了过时的 primarySwatch 和 primaryColor，为所有状态和组件提供了完整的颜色集。

ColorScheme 包含 12 种基本颜色：primary、onPrimary、secondary、onSecondary、surface、onSurface、error、onError、background、onBackground、outline 和 shadow。对于每种颜色，自动计算浅色和深色变体，以及 hover、focus、pressed 和 dragged 状态的颜色。当只指定 primary 时，框架通过 ColorScheme.fromSeed 自动生成其余颜色。

ColorScheme.fromSeed 方法（Material 3）接受一个基本颜色 seedColor，并基于 Material Design 3 算法生成完整的和谐调色板。这消除了手动选择互补色和类似色的需要。只需传递一个主要品牌颜色，ColorScheme.fromSeed 就会为整个 Material 系统创建一致的调色板。

结论：在新项目中，使用 ColorScheme.fromSeed 生成调色板。为了兼容 Material 2——使用 primarySwatch。ColorScheme 是 Material 3 的最低要求。

Typography 和 TextTheme：应用程序字体

TextTheme — ThemeData 的一部分，定义所有级别的标题、副标题、正文和标签的文本样式。Material Design 定义了 15 种文本样式：headlineLarge、headlineMedium、headlineSmall、titleLarge、titleMedium 等。

排版通过 GoogleFonts 自动加载字体设置，或通过内置的 Theme.of(context).textTheme 使用自定义 TextStyle 设置。GoogleFonts 通过 google_fonts 包提供数百种字体，首次加载后将其缓存在本地。替代方案——通过 pubspec.yaml 将字体嵌入项目资源中。

对于自适应排版，TextTheme 支持 MediaQuery.textScaleFactor——当系统字体增大时，所有文本样式按比例缩放。此外，可以根据 MediaQuery.size.width 通过 isTest 为不同的形态因素设置不同的字体大小。

结论：在 ThemeData 中定义 TextTheme，并对所有文本元素使用 Theme.of(context).textTheme。这确保了字体的一致性并简化了排版的全局更改。

主题的继承和覆盖

Theme — InheritedWidget，将主题从父级传播到子级。每个子 widget 既可以读取当前主题通过 Theme.of(context)，也可以通过 ThemeData.copyWith 创建自己的修改副本。

继承机制：如果 widget 被包裹在具有新数据的 Theme 中，其所有后代都会看到覆盖的主题，而此包裹之外的 widget 看到原始主题。这允许例如为特定屏幕隔离样式：标题使用具有修改后的 AppBarTheme 的自定义主题，而应用程序的其余部分使用标准主题。

Theme 的嵌套可以是无限的。Flutter 使用层次搜索：调用 Theme.of(context) 时，框架向上遍历树直到第一个 Theme 并返回其主题。如果未找到任何 Theme——则抛出异常。因此 MaterialApp 始终将应用程序包裹在 Theme 中。

结论：Theme 的继承——一种灵活的样式隔离机制。使用主题覆盖为单个屏幕设置不同样式，而无需重复常规配置。

Dark theme：应用程序的深色主题

Dark theme — Flutter 在浅色和深色主题之间切换的内置功能。ThemeData 存储在 MaterialApp 的 theme（浅色）和 darkTheme（深色）参数中。themeMode 参数管理模式：ThemeMode.light（始终浅色）、ThemeMode.dark（始终深色）或 ThemeMode.system（跟随系统设置）。

在实现深色主题时，不需要重新创建所有样式。只需在 darkTheme 中传递 ColorScheme.fromSeed(seedColor, brightness: Brightness.dark)。框架自动调整颜色以适应深色背景：surface 变为深灰色，文本变为浅色。其他子主题（AppBarTheme、CardTheme、BottomNavigationBarTheme）继承自浅色版本，除非显式覆盖。

为了在主题之间平滑过渡，Flutter 通过 AnimatedTheme 提供动画。当 themeMode 更改时，颜色和样式会被动画化，创建视觉上愉悦的切换效果。AnimatedTheme 使用 Duration 和 Curve 设置动画速度。

结论：深色主题通过 darkTheme 和带有 brightness: Brightness.dark 的 ColorScheme.fromSeed 实现。使用 ThemeMode.system 跟踪用户的系统设置。

使用 Theme 和 ThemeData 的代码示例

示例 1 — 使用 ColorScheme.fromSeed 通过 MaterialApp 进行全局主题配置。

final ThemeData appTheme = ThemeData(
  useMaterial3: true,
  colorScheme: ColorScheme.fromSeed(
    seedColor: Colors.indigo,
    brightness: Brightness.light,
  ),
  appBarTheme: const AppBarTheme(
    centerTitle: true,
    elevation: 0,
  ),
  cardTheme: const CardTheme(
    elevation: 2,
    margin: EdgeInsets.all(8),
  ),
);

return MaterialApp(
  theme: appTheme,
  themeMode: ThemeMode.system,
  home: const MyHomePage(),
);

在此示例中，创建了具有 Material 3、基于 indigo 的配色方案以及自定义 AppBar 和 Card 样式的 ThemeData。useMaterial3 启用了新的 Material 3 主题系统，ColorScheme.fromSeed 生成完整的调色板。

示例 2 — 访问主题并为部分应用程序进行覆盖。

Widget build(BuildContext context) {
  final theme = Theme.of(context);

  return Column(
    children: [
      Text(
        '标准标题',
        style: theme.textTheme.headlineMedium,
      ),
      Theme(
        data: theme.copyWith(
          colorScheme: theme.colorScheme.copyWith(
            primary: Colors.orange,
          ),
        ),
        child: const SpecialSection(),
      ),
    ],
  );
}

第二个示例展示了使用 Theme.of(context) 读取样式以及使用 Theme() 与 copyWith 在树的一部分中覆盖主题而不更改全局配置。Theme 内的 SpecialSection 将获得橙色 primary 颜色，而应用程序的其余部分保留原始 indigo。

结论：全局主题在 MaterialApp 中设置，通过 Theme.of(context) 访问，通过带有 copyWith 的 Theme 覆盖。对于 Material 3，使用 ColorScheme.fromSeed。

配置主题时的常见错误

错误 1：在 Material 3 中使用 primarySwatch 而不是 ColorScheme。primarySwatch 已过时，在 Material 3 中不受支持。在 useMaterial3: true 中使用 primarySwatch 时，Flutter 会发出警告。解决方案：改用 ColorScheme.fromSeed 生成调色板。

错误 2：在 widget 中硬编码颜色而不是使用 Theme.of(context)。开发人员直接在 Container 中编写 Colors.blue，而不是使用来自主题的 primary 或 secondary 颜色。更改主题时，这些颜色保持不变，破坏了统一风格。解决方案：始终使用 Theme.of(context).colorScheme.primary 或主题中的其他颜色。

错误 3：缺少 darkTheme。如果应用程序未定义 darkTheme，当在设备上启用深色主题时，Flutter 会尝试自动调整浅色主题，这通常会产生低质量的结果。解决方案：始终在 MaterialApp 中传递 darkTheme，即使深色主题不是优先事项——这对用户来说是重要的 UX。

错误 4：每次构建都创建新主题。如果 ThemeData 在 build 方法内创建，每次重建 widget 都会创建一个新的主题对象，破坏 InheritedWidget 的优化。解决方案：将 ThemeData 移到 build 之外的 静态字段 或 const 构造函数。

结论：正确的主题化需要统一集中的方法。将 ThemeData 提取到常量中，使用主题中的配色方案，并始终定义浅色和深色两种主题。