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

這里原色的值設置了兩次。 這是為什么？ 我們已經在ColorScheme 中定義了primary ，為什么還要在ThemeData 中定義它。

Answer 1

盡管它們的名稱幾乎相同，但是它們屬於不同的類，基本上有兩個類， ThemeData和ColorScheme 。 ThemeData是保存所有主題設置的一個，並且控制應用程序的外觀，但ColorScheme只是您創建的一組顏色，用於輕松維護應用程序的顏色。 請注意，ThemeData 類有一個參數 colorScheme，因此您可以創建自己的 colorScheme 並將其添加到 ThemeData 對象中。

在primaryColor在ThemeData是所有應用程序的主色，你可以通過此行訪問：

Theme.of(context).primaryColor

ColorScheme的primary只是該colorScheme 對象的primaryColor，您也可以使用該行訪問它：

Theme.of(context).colorScheme.primary

筆記

所有小部件樣式都繼承自ThemeData （在MaterialApp定義）的顏色或主題， ThemeData不是ColorScheme ，colorScheme 只是您定義的額外顏色，無論是在 ThemeData 中還是在應用程序的任何地方使用。

因此，僅當您在 ThemeData 中使用這些顏色時，colorScheme 才會影響小部件的顏色，如下所示：

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