flutter - Flutter 中 colorScheme 和 ThemeData 声明的原色

Question

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

这是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

虽然它们的名称完全相同，但是它们属于两个不同的类，基本上有两个类，ThemeData 和ColorScheme。 ThemeData 包含所有主题设置，并且控制应用程序的外观，但 ColorScheme 只是您创建的一组颜色，用于轻松维护应用程序的外观颜色。注意 ThemeData 类有一个参数 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,
);
}