在 Flutter 中，primaryColor 和 PrimarySwatch 的区别是什么？

小开

最佳答案

primarySwatch是没有是 Color是 MaterialColor。这意味着一个材质应用程序将使用不同深浅的颜色。

确切地说，primaryColor通常等于 primarySwatch[500]。

通常定义 primarySwatch比定义 primaryColor更好。因为一些材质组件可能使用不同的阴影的 primaryColor的东西，如阴影，边框，..。

小开

以下内容取自我对 theme _ data. dart 的阅读:

primarySwatch默认为 Colors.blue，并设置以下字段(包括 primaryColor)为 MaterialColor输入的各种阴影，这取决于主题 brightness是亮还是暗(默认为亮) :

灯光主题

// The default shade for the color is used
primaryColor = primarySwatch; // [500] for normal colors and [200] for accent colors

primaryColorLight = primarySwatch[100];

primaryColorDark = primarySwatch[700];

// This can be overridden by setting accentColor (below) manually
toggleableActiveColor = primarySwatch[600];

accentColor = primarySwatch[500];

secondaryHeaderColor = primarySwatch[50];

textSelectionColor = primarySwatch[200];

textSelectionHandleColor = primarySwatch[300]

backgroundColor = primarySwatch[200];

* buttonColor 设置为默认值(gray [300])

黑暗主题

buttonColor = primarySwatch[600];

* 上面列出的光线主题的其余字段设置为深色默认值(tealAccent 的各种色调，灰色或黑色)

所有主题(光明或黑暗)

// Brightness.dark/light is estimated based on the default shade for the color
// This also sets the bool primaryIsDark
primaryColorBrightness = estimateBrightnessForColor(primarySwatch);

// This generates the modern simplified set of theme colors flutter recommends
// using when theming Widgets based on the theme. Set it manually if you need
// more control over individual colors
colorScheme = ColorScheme.fromSwatch(
primarySwatch: primarySwatch, // as above
primaryColorDark: primaryColorDark, // as above
accentColor: accentColor, // as above
cardColor: cardColor, // default based on theme brightness, can be set manually
backgroundColor: backgroundColor, // as above
errorColor: errorColor, // default (Colors.red[700]), can be set manually
brightness: brightness, // default (Brightness.light), can be set manually
);

正如在已接受的答案中提到的，只有设置 primaryColor可以让 Widgets 开放，以选择一些其他的默认颜色(各种深浅不同的蓝色)基于上面的其他字段，如果他们没有单独设置，所以 primarySwatch是一个简单主题的方便的速记。

然而，一般来说，ColorScheme 字段是最重要的，因为根据现代约定，您应该使用 Theme.of(context).colorScheme.<Color>(尽管它可能还不能在任何地方工作，这取决于您何时阅读这篇文章)。

因此，如果你需要对单个主题颜色进行更多的控制，你可以设置 ColorScheme.fromSwatch中使用的字段，或者只设置 primarySwatch(为了向后兼容那些还没有迁移的 Flutter Widgets) ，然后手动设置 colorScheme来进行额外的控制。更多信息请参见本文档..。

小开

主手表是材质颜色。

/// Defines a single color as well a color swatch with ten shades of the color.
///
/// The color's shades are referred to by index. The greater the index, the
/// darker the color. There are 10 valid indices: 50, 100, 200, ..., 900.
/// The value of this color should the same the value of index 500 and [shade500].
/// hex_value1 = 0xFFAAD401; hex_value2 = 0xFFAAD403; ...
MaterialColor myGreen = const MaterialColor(0xFFAAD400,
const {
50 : const Color(hex_value1),
100 : const Color(hex_value2),
200 : const Color(hex_value3),
300 : const Color(hex_value4),
400 : const Color(hex_value5),
500 : const Color(hex_value6),
600 : const Color(hex_value7),
700 : const Color(hex_value8),
800 : const Color(hex_value9),
900 : const Color(hex_value10)});
// use MaterialColor: myGreen.shade100,myGreen.shade500 ...
myGreen.shade50 // Color === 0xFFAAD401

小开

Swatch 是一个类别。颜色是这个类别中的一个范围，尽管不限于它。基于样本颜色，你指定的颤振可以选择一个背景和前景颜色，它觉得适合一个组件。

Tldr ;

了解样本和颜色的区别是很重要的。色板是一种颜色.它的类型 MaterialColor材料有下面列出的样品加上白色。(忽略50)

.

每个样本有不同的范围。尽管你不受它的限制。您可以指定任何有效的颜色代码，即使它不在样本范围内。

.

基于样本颜色，你指定的颤振可以选择一个背景和前景颜色，它觉得适合一个组件。

.

这里是所有样品及其颜色的列表。截图来自 https://material.io/design/color/the-color-system.html#tools-for-picking-colors