ThemeData(primaryColor: Colors.red) 和提供一个 ColorScheme.primary 有什么区别

Question

我是 Flutter 的新手，没有区别。通过提供颜色有什么区别

primaryColor 喜欢 theme: ThemeData(primaryColor: Colors.red)

和

colorScheme 喜欢 theme: ThemeData(colorScheme: ThemeData().colorScheme.copyWith(primary: Color.red))

因此，假如这个，如果我同时设置primaryColor并colorScheme.primary以不同的颜色，是什么改变UI，我们会得到。请检查以下示例：

Widget build(BuildContext context) {

    final ColorScheme colorScheme = ColorScheme(
      primary: Color(0xFFFFFFFF), // <---- I set white color here
      primaryVariant: Color(0xFF117378),
      secondary: Color(0xFFEFF3F3),
      secondaryVariant: Color(0xFFFAFBFB),
      background: Color(0xFF636363),
      surface: Color(0xFF808080),
      onBackground: Colors.white,
      error: _lightFillColor,
      onError: _lightFillColor,
      onPrimary: _lightFillColor,
      onSecondary: Color(0xFF322942),
      onSurface: Color(0xFF241E30),
      brightness: Brightness.light,
    );
    return Theme(
      data: Theme(
        primaryColor: Colors.red, // <----- I set color to red
        colorScheme: colorScheme //  <----- colorScheme.primary is white
      ),
      child: child
    );
  }
}

Answer 1

答案 2.0

经过一番研究，我想告诉你，Flutter 现在正朝着ColorScheme()广泛使用的方向发展，而不是primaryColor从ThemeData()

现在进入正题，首先让我们了解一下这两个在我们的 ThemeData

1. primaryColor是负责制定thorughout应用的主题和背景颜色
2. colorScheme，另一方面是一组基于 Material 规范的十二种颜色，可用于配置大多数组件的颜色属性。

为什么是主要的，而不是配色方案：这是因为，如果您想使用colorscheme，那么您需要在 中定义所有预定义的元素ColorScheme class，这在当前情况下是不可行的。

此外，primaryColor 始终优先负责应用程序的主题。

ColorScheme 可用于为卡片、材质按钮等小部件分配颜色，甚至不影响应用程序的当前主题，使用 Theme.of(context).colorScheme.primary

让我们看一个例子：

class MyApp extends StatelessWidget {
  final ColorScheme colorScheme = ColorScheme(
    primary: Color(0xFFFFFFFF), // <---- I set white color here
    primaryVariant: Color(0xFF117378),
    secondary: Color(0xFFEFF3F3),
    secondaryVariant: Color(0xFFFAFBFB),
    background: Color(0xFF636363),
    surface: Color(0xFF808080),
    onBackground: Colors.white,
    error: Colors.redAccent,
    onError: Colors.redAccent,
    onPrimary: Colors.redAccent,
    onSecondary: Color(0xFF322942),
    onSurface: Color(0xFF241E30),
    brightness: Brightness.light,
  );

  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Colors.red,
        colorScheme: colorScheme
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

在 MYHOMEPAGE 中使用主色和配色方案

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: Container()
       )
    );
  }
}

所以，如果你仔细看，primaryColor 没有在 中提到MYHOMEPAGE，它将继承它的 parent primaryColor，而不是colorScheme。

现在，请注意，colorScheme 可以显式用于定义小部件的颜色。

此外， colorScheme.copyWith() 只会更改当前现有颜色内的颜色属性，而不会影响全局 colorScheme 颜色属性，例如primary。

让我们看看用法，如果我们想colorScheme在我们的主题中使用

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.primary, // <-- Setting the color of the appbar explicitely using colorScheme
          title: Text(widget.title),
        ),
        body: Center(
          child: Container()
       )
    );
  }
}

现在我们得到这个结果，背景现在变成白色

要旨

1. 主题primaryColor和其他颜色属性将始终优先于colorScheme.
2. 要使用colorScheme，首先需要在main.dart文件中定义自定义 colorScheme，然后在另一个实例中使用用于设置背景等。

为了获得更多详细信息，请阅读以下文档：

• 配色方案类
• colorScheme 属性
• 材料设计
• 主题数据类