老师，在flutter3.0里，我在MaterialApp中，给theme设置主题不生效

Question

老师，我给app设置theme样式为红色，但是不生效，是哪里设置的不对吗？代码如下：

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 样式
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Material App"),
        ),
        body: const Center(
          child: Column(
            children: [
              Text("data"),
              FlutterLogo(
                size: 100,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

CrazyCodeBoy 2024-09-10 08:22:07

从代码来看，你为 `MaterialApp` 设置了 `primarySwatch: Colors.red`，但这个属性实际上的作用是定义应用的主要颜色调色板。如果这个颜色没有生效，可能有以下几个原因需要检查：

1. **`primarySwatch` 只影响某些组件的颜色**：
   - `primarySwatch` 主要影响的是 `AppBar` 和某些 `Material` 组件（比如浮动按钮、按钮等）的默认背景颜色。如果你想让其他组件（比如文字、图标等）也使用红色样式，需要进一步修改 `textTheme` 或其他相关的 `ThemeData` 属性。
   - 你可以检查一下 `AppBar` 的颜色是否生效。如果 `AppBar` 的背景没有变为红色，可能还有其他问题。

2. **`Scaffold` 的背景颜色**：
   - 如果你希望 `Scaffold` 背景颜色变成红色，你需要明确设置 `backgroundColor`，因为 `primarySwatch` 不会自动应用于 `Scaffold` 的背景。

3. **`debug mode` 的干扰**：
   - 如果你在 `debug` 模式下运行应用程序，某些样式的更改可能不会立即生效。你可以尝试清理项目，重新编译，并在 `release` 模式下查看效果。

4. **Material 组件的版本差异**：
   - 确保你使用的 Flutter 版本是最新的，因为旧版本可能存在不同的样式行为。

如果你想让 `AppBar` 和其他组件使用红色主题，并确保一切正常工作，可以试试下面的代码：

```dart
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 设置主题样式
      theme: ThemeData(
        primarySwatch: Colors.red,
        appBarTheme: AppBarTheme(
          backgroundColor: Colors.red, // 设置AppBar的背景颜色
        ),
        textTheme: const TextTheme(
          bodyText1: TextStyle(color: Colors.red), // 设置文本颜色为红色
        ),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Material App"),
        ),
        body: const Center(
          child: Column(
            children: [
              Text("data"),
              FlutterLogo(
                size: 100,
              ),
            ],
          ),
        ),
      ),
    );
  }
}
```

这段代码确保了 `AppBar` 和文本使用了红色主题。

• 提问者 __潇湘夜雨__ #1

  好的，谢谢老师。