内容简介:在Flutter开发中,我们可以通过定义全局Theme会影响整个app的颜色和字体样式。使用起来非常简单,只需要向MaterialApp构造器传入
在Flutter开发中,我们可以通过定义 Theme
,复用颜色和字体样式,从而让整个app的设计看起来更一致。
一. Theme主题的使用
Theme分为:全局Theme和局部Theme
主题有两个作用:
-
设置了主题之后,某些Widget会自动使用主题的样式(比如AppBar的颜色)
-
将某些样式放到主题中统一管理,在应用程序的其它地方直接引用
1.1. 全局Theme
全局Theme会影响整个app的颜色和字体样式。
使用起来非常简单,只需要向MaterialApp构造器传入 ThemeData
即可。
-
如果没有设置Theme,Flutter将会使用预设的样式。
-
当然,我们可以对它进行定制。
class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( // 1.亮度: light-dark brightness: Brightness.light, // 2.primarySwatch: primaryColor/accentColor的结合体 primarySwatch: Colors.red, // 3.主要颜色: 导航/底部TabBar primaryColor: Colors.pink, // 4.次要颜色: FloatingActionButton/按钮颜色 accentColor: Colors.orange, // 5.卡片主题 cardTheme: CardTheme( color: Colors.greenAccent, elevation: 10, shape: Border.all(width: 3, color: Colors.red), margin: EdgeInsets.all(10) ), // 6.按钮主题 buttonTheme: ButtonThemeData( minWidth: 0, height: 25 ), // 7.文本主题 textTheme: TextTheme( title: TextStyle(fontSize: 30, color: Colors.blue), display1: TextStyle(fontSize: 10), ) ), home: HYHomePage(), ); } }
1.2. 局部Theme
如果某个具体的Widget不希望直接使用全局的Theme,而希望自己来定义,应该如何做呢?
-
非常简单,只需要在Widget的父节点包裹一下Theme即可
创建另外一个新的页面,页面中使用新的主题:
-
在新的页面的Scaffold外,包裹了一个Theme,并且设置data为一个新的ThemeData
class HYSecondPage extends StatelessWidget { @override Widget build(BuildContext context) { return Theme( data: ThemeData(), child: Scaffold( ), ); } }
但是,我们很多时候并不是想完全使用一个新的主题,而且在之前的主题基础之上进行修改:
class HYSecondPage extends StatelessWidget { @override Widget build(BuildContext context) { return Theme( data: Theme.of(context).copyWith( primaryColor: Colors.greenAccent ), child: Scaffold( ), ); } }
1.3. Flutter中文网错误
但是这里有一个注意事项:accentColor在这里并不会被覆盖。
为什么不能覆盖呢?https://github.com/material-components/material-components-flutter-codelabs/issues/106
我摘抄一点官方人员的回复:
其实官网文档中之前也出现了类似的错误,比如Flutter中文网之前是翻译官方文档的
-
https://flutterchina.club/cookbook/design/themes/其中就有该错误
后来官网文档中对这个问题进行了修正:
二. 暗黑Theme适配
2.1. darkTheme
目前很多应用程序都需要适配暗黑模式,Flutter中如何做到暗黑模式的适配呢?
事实上,MaterialApp中有theme和dartTheme两个参数:
-
按照下面的写法,我们已经默认适配了暗黑主题
class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData.light(), darkTheme: ThemeData.dark(), home: HYHomePage(), ); } }
2.2. 开发中适配
在开发中,为了能适配两种主题(设置是更多的主题),我们可以封装一个AppTheme
-
1.公共的样式抽取成常量
-
2.封装一个亮色主题
-
3.封装一个暗黑主题
import 'package:flutter/material.dart'; class AppTheme { // 1.抽取相同的样式 static const double _titleFontSize = 20; // 2.亮色主题 static final ThemeData lightTheme = ThemeData( primarySwatch: Colors.pink, primaryTextTheme: TextTheme( title: TextStyle( color: Colors.yellow, fontSize: _titleFontSize ) ), textTheme: TextTheme( body1: TextStyle(color: Colors.red) ) ); // 3.暗黑主题 static final ThemeData darkTheme = ThemeData( primaryColor: Colors.grey, primaryTextTheme: TextTheme( title: TextStyle( color: Colors.white, fontSize: _titleFontSize ) ), textTheme: TextTheme( title: TextStyle(color: Colors.white), body1: TextStyle(color: Colors.white70) ) ); }
在MaterialApp中,可以决定使用哪一个主题:
class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: AppTheme.lightTheme, darkTheme: AppTheme.darkTheme, home: HYHomePage(), ); } }
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- Metierial Design 风格博客主题 Fluid 1.0b5 发布
- 谷歌开源项目风格指南之 Python 风格指南
- 数仓主题域、主题、业务域之间有什么的关系
- 一个基于vuepress默认主题开发的主题-vuepress-theme-reform
- 把主题升级了一下
- Android自动切换夜间主题
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Game Programming Patterns
Robert Nystrom / Genever Benning / 2014-11-2 / USD 39.95
The biggest challenge facing many game programmers is completing their game. Most game projects fizzle out, overwhelmed by the complexity of their own code. Game Programming Patterns tackles that exac......一起来看看 《Game Programming Patterns》 这本书的介绍吧!
JSON 在线解析
在线 JSON 格式化工具
UNIX 时间戳转换
UNIX 时间戳转换