Flutter中primaryColor和primarySwatch有什么区别?

时间:2018-05-07 10:52:21

标签: flutter

在Flutter中,可以使用ThemeData类将主题应用于应用程序。但是这个课程的两个特点使我感到困惑:primaryColorprimarySwatch。这两个属性之间的区别是什么,何时使用其中一个?感谢。

4 个答案:

答案 0 :(得分:22)

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

primaryColor是其中一种阴影。确切地说,primaryColor通常等于primarySwatch[500]

通常最好定义primarySwatch而不是primaryColor。因为某些材质成分可能会使用primaryColor的不同阴影来表示阴影,边框等......

答案 1 :(得分:4)

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

tldr;

了解色板和颜色之间的区别很重要。 色板是一种颜色。它的 MaterialColor 类型材料具有下面列出的色板和白色。 (忽略 50)

Various Swatches

.

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

enter image description here

.

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

.

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

的屏幕截图

Various Swatches

答案 2 :(得分:3)

以下是我对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可以使窗口小部件处于打开状态,以便根据上述其他字段之一选择其他默认颜色(蓝色的各种阴影),因此primarySwatch是简单主题的便捷速记。

但是,一般而言,根据您应该使用Theme.of(context).colorScheme.<Color>的现代惯例,colorScheme字段最为重要(尽管它可能并非在所有地方都起作用,这取决于您何时阅读)。

因此,如果您需要对各个主题颜色进行更多控制,则可以设置ColorScheme.fromSwatch中使用的字段,也可以仅设置primarySwatch(以实现具有以下功能的Flutter Widget的向后​​兼容性:尚未迁移),然后手动设置colorScheme以获得更多控制权。 See also this document for more information…

答案 3 :(得分:0)

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