Flutter 中 colorScheme 和 ThemeData 声明的原色

Question

我一直在关注 Material 设计组件，在底部，每个组件都有一个主题部分。

这是 ThemeData 代码，

final ThemeData base = ThemeData.light();
return base.copyWith(
  colorScheme: _shrineColorScheme, 
  toggleableActiveColor: shrinePink400,
  accentColor: shrineBrown900,
  primaryColor: shrinePink100,  //defines primary
  buttonColor: shrinePink100,
  scaffoldBackgroundColor: shrineBackgroundWhite,
  cardColor: shrineBackgroundWhite,
  textSelectionColor: shrinePink100,
  errorColor: shrineErrorRed,
  primaryIconTheme: _customIconTheme(base.iconTheme),
  textTheme: _buildShrineTextTheme(base.textTheme),
  primaryTextTheme: _buildShrineTextTheme(base.primaryTextTheme),
  accentTextTheme: _buildShrineTextTheme(base.accentTextTheme),
  iconTheme: _customIconTheme(base.iconTheme),
);
}

这里是 ColorScheme,

的定义

const ColorScheme _shrineColorScheme = ColorScheme(
 primary: shrinePink400,  //defines primary
 primaryVariant: shrineBrown900,
 secondary: shrinePink50,
 secondaryVariant: shrineBrown900,
 surface: shrineSurfaceWhite,
 background: shrineBackgroundWhite,
 error: shrineErrorRed,
 onPrimary: shrineBrown900,
 onSecondary: shrineBrown900,
 onSurface: shrineBrown900,
 onBackground: shrineBrown900,
 onError: shrineSurfaceWhite,
 brightness: Brightness.light,
);

这里primary颜色的值设置了两次。这是为什么？我们已经在 ColorScheme 中定义了 primary 那么为什么还要在 ThemeData.

中定义呢？

Answer 1

虽然名字一模一样，但是是两个不同的class，基本上就是两个class，ThemeData和ColorScheme。 ThemeData 包含您所有的主题设置，并且控制应用程序的外观，但 ColorScheme 只是您创建的一组颜色，用于轻松维护应用程序的颜色。注意 ThemeData class 有一个参数 colorScheme，因此您可以创建自己的 colorScheme 并将其添加到 ThemeData 对象。

ThemeData 中的 primaryColor 是您所有应用程序的主要颜色，您可以通过此行访问它：

Theme.of(context).primaryColor

ColorScheme 中的 primary 只是该 colorScheme 对象的 primaryColor，您也可以使用该行访问它：

Theme.of(context).colorScheme.primary

备注

所有小部件样式都继承自 ThemeData 的颜色或主题（在 MaterialApp 中定义）而不是 ColorScheme，colorScheme 只是您定义要在 ThemeData 或应用程序中的任何位置。

因此只有当您在 ThemeData 中使用这些颜色时，colorScheme 才会影响小部件颜色，如下所示：

final ThemeData base = ThemeData.light();
return base.copyWith(
  colorScheme: _shrineColorScheme, 
  accentColor: _shrineColorScheme.secondary,
  primaryColor: _shrineColorScheme.primary, 
  scaffoldBackgroundColor: _shrineColorScheme.background,
);
}

Answer 2

ThemeData 对象中的评论提供了一些清晰度：

[colorScheme] is the preferred way to configure colors. The other color properties (as well as primaryColorBrightness, and primarySwatch) will gradually be phased out, see https://github.com/flutter/flutter/issues/91772.

所以现在，我建议使用您的 ColorScheme 对象设置 colorScheme 属性，然后在 ThemeData 属性中引用该对象中的值，例如 primaryColor、focusColor 等。

Flutter 中 colorScheme 和 ThemeData 声明的原色

Primary color declared in colorScheme and ThemeData in Flutter

themes

colors

flutter

备注