Flutter 在颤振中primaryColor和primarySwatch的区别是什么？

在Flatter中，可以使用ThemeData类将主题应用于应用程序。但是这个类有两个特性让我困惑：

primaryColor

和

primarySwatch

。这两个属性之间有什么区别？何时使用其中一个？谢谢。

原始样本

不是

颜色

。这是

MaterialColor

。 这意味着它是一个材质应用程序将使用的颜色的不同阴影

primaryColor

就是其中之一。准确地说，

primaryColor

通常等于

primarySwatch[500]

---

通常最好定义

primarySwatch

而不是

primaryColor

。因为某些材质组件可能会对阴影、边框等对象使用不同的

primaryColor

以下内容摘自我对theme_data.dart的阅读：

---

primarySwatch

默认为

颜色。蓝色

，并根据主题

亮度

是亮还是暗（默认为亮），将以下字段（包括

primaryColor

）设置为

材质颜色

输入的各种深浅：

轻主题

//使用颜色的默认阴影
primaryColor=primarySwatch；//[500]用于普通颜色，[200]用于强调颜色

primaryColorLight=primarySwatch[100]；

primaryColorDark=primarySwatch[700]；

//这可以通过手动设置accentColor（如下）来覆盖
toggleableActiveColor=原始样本[600]；

accentColor=primarySwatch[500]；

secondaryHeaderColor=主样本[50]；

textSelectionColor=primarySwatch[200]；

textSelectionHandleColor=primarySwatch[300]

backgroundColor=primarySwatch[200]；

*按钮颜色设置为默认值（灰色[300]）

黑暗主题

buttonColor=primarySwatch[600]；

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

所有主题（浅色或深色）

//亮度.dark/亮度是根据颜色的默认阴影估计的
//这也会设置布尔主标志
primaryColorBrightness=颜色的估计亮度（primarySwatch）；

//这将生成颤振推荐的现代简化主题颜色集
//基于主题设置小部件主题时使用。如果需要，请手动设置
//对单个颜色的更多控制
colorScheme=colorScheme.fromSwatch(
primarySwatch:primarySwatch，//如上所述
primaryColorDark:primaryColorDark，//如上所述
accentColor:accentColor，//如上所述
cardColor:cardColor，//基于主题亮度的默认值，可以手动设置
backgroundColor:backgroundColor，//如上所述
errorColor:errorColor，//可以手动设置默认值（Colors.red[700]）
亮度：亮度，//默认值（亮度.light），可手动设置
);

正如公认的答案中所提到的，只有设置

primaryColor

才能让小部件根据上面的其他字段之一选择其他默认颜色（各种深浅的蓝色），如果它们没有单独设置，那么

primarySwatch

是简单主题的便捷速记

但是，一般来说，根据现代惯例，colorScheme字段是最重要的，您应该使用

Theme.of（context）.colorScheme.

（尽管它可能还不能在任何地方工作，这取决于您阅读本文的时间）

因此，如果您需要对各个主题颜色进行更多控制，您可以设置

ColorScheme.fromSwatch

中使用的字段，或者只设置

primarySwatch

（用于尚未迁移的flift小部件的向后兼容性），然后手动设置

配色方案

，以进行额外控制

主要样本是

---

样例是一个类别Color是该类别中的一个范围，但不限于此。根据您指定的样例颜色，“颤振”可以选择一个背景色和一个前景色，它感觉适合某个组件

tldr

了解样本和颜色的区别很重要色样是一种颜色。其类型为

MaterialColor

Material，下面列出了加上白色的样例。（忽略50）

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

根据您指定的样例颜色，“颤振”可以选择一个背景色和一个前景色，它感觉适合某个组件

下面是所有样例及其颜色的列表。截图取自

---

其他色调是什么？这里有更多信息，谢谢，我很感激it@jaumard你不能

primarySwatch

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

PrimaryColor

，您可能会遇到一些奇怪的情况，其中一些小部件不使用该颜色，因为它们使用不同的

主题

字段。感谢所有的可视化。

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