Flutter 颜色和主题
封面图
•
2025-11-03
•
Flutter
0
0
0
0
在 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(), ); } } ``` --- 如果你有具体的需求(比如设计一个完整的主题、使用自定义字体、处理深色模式等),欢迎告诉我,我可以提供更详细的指导!
上一篇:
Flutter 跨组件状态共享
下一篇:
Flutter 按需rebuild(ValueListenableBuilder)
标题录入,一次不能超过6条
返回顶部
留言
留言
评论