Flutter 颜色和主题

封面图 • 2025-11-03 • Flutter

在 Flutter 中，**颜色（Color）** 和 **主题（Theme）** 是构建美观 UI 的关键部分。它们不仅影响视觉效果，还能帮助你实现一致的设计风格。

---

## 一、颜色（Color）

Flutter 提供了多种方式来定义和使用颜色。

### 1. 使用 `Colors` 类
Flutter 提供了一个内置的 `Colors` 类，包含许多预定义的颜色：

```dart
Colors.red
Colors.blue
Colors.green
Colors.white
Colors.black
```

例如：

```dart
Container(
  color: Colors.blue,
)
```

### 2. 自定义颜色（通过 RGB 或 HSL）
你可以通过 `Color.fromRGBO()` 来创建自定义颜色：

```dart
Color(0xFF00FF00) // 绿色，十六进制表示法
Color.fromRGBO(0, 255, 0, 1.0) // 红、绿、蓝、透明度
```

> 注意：`0xFF` 表示不透明，`0x00` 表示完全透明。

### 3. 使用 `MaterialColor` 和 `MaterialAccent`
Flutter 提供了 Material Design 风格的颜色，如：

```dart
Colors.blue[500] // 蓝色主色
Colors.red[900]  // 深红色
```

---

## 二、主题（Theme）

Flutter 的 `Theme` 允许你为整个应用设置统一的视觉风格，包括颜色、字体、图标等。

### 1. 基本用法

你可以通过 `ThemeData` 创建一个主题，并将其应用到整个应用中：

```dart
void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.blue,
        accentColor: Colors.orange,
        fontFamily: 'Roboto',
        textTheme: TextTheme(
          headline6: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
        ),
      ),
      home: MyHomePage(),
    ),
  );
}
```

### 2. 主题属性说明

| 属性 | 说明 |
|------|------|
| `primaryColor` | 应用的主色调（常用于按钮、导航栏等） |
| `accentColor` | 辅助颜色（常用于高亮、选择框等） |
| `textTheme` | 设置文本样式（标题、正文等） |
| `colorScheme` | 用于 Material 3 的颜色方案（支持深色/浅色模式） |
| `brightness` | 设置明暗模式（`Brightness.light` / `Brightness.dark`） |

### 3. 使用 `Theme.of(context)` 获取当前主题

你可以在任何 widget 中通过 `Theme.of(context)` 获取当前主题的信息：

```dart
Text(
  'Hello',
  style: Theme.of(context).textTheme.headline6,
)
```

---

## 三、深色/浅色模式（Dark/Light Mode）

Flutter 支持根据系统设置自动切换深色或浅色模式，也可以手动切换。

### 1. 自动适配系统设置

```dart
MaterialApp(
  theme: ThemeData.light(),
  darkTheme: ThemeData.dark(),
  themeMode: ThemeMode.system, // 默认使用系统设置
  ...
)
```

### 2. 手动切换模式

你可以通过 `setState` 切换主题模式：

```dart
void _toggleTheme() {
  setState(() {
    _isDarkMode = !_isDarkMode;
  });
}

MaterialApp(
  themeMode: _isDarkMode ? ThemeMode.dark : ThemeMode.light,
  ...
)
```

---

## 四、颜色和主题的最佳实践

- **保持一致性**：使用统一的主题颜色和字体风格。
- **使用 `ThemeData`**：避免硬编码颜色和字体，提高可维护性。
- **利用 `ColorScheme`**：适用于 Material 3 的颜色方案。
- **考虑用户偏好**：支持系统默认的深色/浅色模式。

---

## 五、示例：完整主题设置

```dart
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        accentColor: Colors.amber,
        fontFamily: 'Arial',
        textTheme: TextTheme(
          bodyText1: TextStyle(fontSize: 16, color: Colors.black),
        ),
      ),
      darkTheme: ThemeData(
        primarySwatch: Colors.grey,
        accentColor: Colors.yellow,
        fontFamily: 'Arial',
        textTheme: TextTheme(
          bodyText1: TextStyle(fontSize: 16, color: Colors.white),
        ),
      ),
      themeMode: ThemeMode.system,
      home: HomePage(),
    );
  }
}
```

---

如果你有具体的需求（比如设计一个完整的主题、使用自定义字体、处理深色模式等），欢迎告诉我，我可以提供更详细的指导！