在Flutter中,可以使用ThemeData类将主题应用于应用程序。但是这个类的两个属性使我感到困惑:primaryColor
和primarySwatch
。这两个属性之间的区别是什么?什么时候使用另一个属性?谢谢。
Answers:
primarySwatch
是不是一个Color
。是MaterialColor
。这意味着它是材质应用程序将使用的颜色的不同阴影。
primaryColor
是这些阴影之一。确切地说,primaryColor
通常等于primarySwatch[500]
。
通常最好定义一个primarySwatch
而不是primaryColor
。因为某些材质组件可能会对阴影使用不同的阴影,primaryColor
例如边框,边框,...
primarySwatch
只是设置其他属性的快捷方式。如果需要自定义属性,则必须在主题中添加字段。
PrimaryColor
,则可能会陷入一些奇怪的情况,即某些小部件未使用该颜色,因为它们使用了不同的Theme
字段。
以下是我对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
是简单主题的方便快捷方式。
通常,根据您应该使用的现代约定,colorScheme字段最重要Theme.of(context).colorScheme.<Color>
(尽管它可能无法在任何地方都起作用,具体取决于您何时阅读)。
因此,如果您需要对各个主题颜色进行更多控制,则可以设置中使用的字段ColorScheme.fromSwatch
,也可以仅设置primarySwatch
(以实现尚未迁移的Flutter Widget的向后兼容性),然后colorScheme
手动设置以获取更多信息控制。另请参阅本文档以获取更多信息……
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