Flutter中的primaryColor和primarySwatch有啥区别？

Posted 2023-02-23

【中文标题】Flutter中的primaryColor和primarySwatch有啥区别？

【英文标题】：What is the difference between primaryColor and primarySwatch in Flutter?Flutter中的primaryColor和primarySwatch有什么区别？

【发布时间】：2018-10-17 03:47:56

【问题描述】：

在 Flutter 中，可以使用 ThemeData 类将主题应用于应用程序。但是这个类有两个属性让我感到困惑：primaryColor 和primarySwatch。这两个属性之间有什么区别以及何时使用其中一个？谢谢。

【参考方案1】：

primarySwatch不是Color。这是MaterialColor。 这意味着它是材质应用程序将使用的不同色调的颜色。

primaryColor 就是其中一种。确切地说，primaryColor 通常等于primarySwatch[500]。

通常最好定义一个primarySwatch 而不是primaryColor。因为某些材质组件可能会使用primaryColor 的不同阴影来处理阴影、边框等内容...

【讨论】：

其他色调是什么？

更多信息在这里material.io/guidelines/style/color.html#color-color-palette

谢谢，非常感谢

@jaumard 你不能。 primarySwatch 只是设置其他属性的快捷方式。如果您需要自定义属性，则必须向主题添加字段。

是的。如果您只设置PrimaryColor，您可能会陷入奇怪的情况，即某些小部件没有使用该颜色，因为它们使用了不同的Theme 字段。

【参考方案2】：

以下内容来自我对 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 设置为默认值（灰色[300]）

黑暗主题

buttonColor = primarySwatch[600];

*上面列出的浅色主题的其余字段设置为暗色默认值（各种深浅不一的青色、灰色或黑色）

所有主题（浅色或深色）

// 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 可以让小部件打开以根据上述其他字段之一选择其他默认颜色（各种蓝色阴影），如果它们没有单独设置，所以 @987654340 @ 是简单主题的便捷简写。

然而，一般来说，colorScheme 字段是最重要的，根据您应该使用的现代约定 Theme.of(context).colorScheme.<Color>（尽管它可能并不适用于所有地方，具体取决于您阅读本文的时间）。

因此，如果您需要对单个主题颜色进行更多控制，您可以设置ColorScheme.fromSwatch 中使用的字段，或者只设置primarySwatch（为了向后兼容尚未迁移的 Flutter Widget )，然后手动设置colorScheme 以进行额外控制。 See also this document for more information…

【参考方案3】：

Swatch 是一个类别。 颜色 是该类别中的一个范围，但不限于此。根据您指定的样本颜色，flutter 可以选择适合组件的背景和前景色。

tldr;

了解色板和颜色的黑白差异很重要。 色板是一种颜色。它的类型为MaterialColor 材料有下面列出的色板加白色。 （忽略 50）

.

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

.

根据您指定的样本颜色，flutter 可以选择适合组件的背景和前景色。

.

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

【讨论】：

感谢所有的可视化。

【参考方案4】：

primarySwatch 是MaterialColor。

/// 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