主色不会改变应用栏颜色

Question

我正在跟随 YouTuber 一步一步创建这个项目，但是当我想更改“ThemeData 原色”时，它不会改变，仍然保持默认颜色浅蓝色。这是它的截图

Answer 1

根据

AppBar

的描述，默认使用

ColorScheme.primary

。

默认的应用栏[背景颜色]是整体主题的 [ColorScheme.primary] 如果整体主题的亮度是[Brightness.light]。不幸的是，这与默认值相同 [TextButton] 的 [ButtonStyle.foregroundColor] 用于浅色主题。 在这种情况下，更好的文本按钮前景色是 [ColorScheme.onPrimary]，一种与以下颜色形成鲜明对比的颜色 [ColorScheme.primary]。要解决该问题，请覆盖 [文本按钮.样式]：

尝试使用

colorScheme

 MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSwatch(
          primarySwatch: Colors.purple,
        ),
      ),
      home: MyApp(),
    ),

并在其他地方使用

 Theme.of(context).colorScheme.primary,

了解更多，请访问主题数据类

Answer 2

appBar 在构建时首先在 AppBar() 中查找属性 backgroundColor。 如果没有找到，它会在 ThemeData 属性 appBarTheme 的 AppBarTheme() 中查找属性 backgroundColor。 如果也没有找到，它会查找 ThemeData 的 primary 属性。

Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light().copyWith(
        // appBarTheme: const AppBarTheme(
        //   backgroundColor: Colors.purple[900],
        // ),
        colorScheme: const ColorScheme.light().copyWith(
          primary: const Colors.purple[900],
        ),
      ),

或者，你可以这样做：

Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light().copyWith(
         appBarTheme: const AppBarTheme(
           backgroundColor: Colors.purple[900],
         ),
        ),
      ),

或者在构建 appBar 时，只需向其添加属性 backgroundColor，但这只会对该特定的 appBar 进行更改，而上述代码示例将进行应用程序范围的更改。

appBar: AppBar(
        backgroundColor: Colors.purple[900],
        title: const Text('Your Title'),
      ),

让我知道这是否有效。