Flutter 中 colorScheme 和 ThemeData 中声明的原色

Question

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

这是主题数据代码，

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,
);

这里原色的值被设置了两次。这是为什么？我们已经在ColorScheme中定义了primary ，所以为什么还要在ThemeData中定义它呢？

Answer 1

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

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

Theme.of(context).primaryColor

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

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,
);
}