内容简介:在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自动切换夜间主题
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
群体智能
James Kennedy、Russell C Eberhart、Yuhui Shi / 人民邮电出版社 / 2009-2-1 / 75.00元
群体智能是近年来发展迅速的人工智能学科领域.通过研究分散,自组织的动物群体和人类社会的智能行为, 学者们提出了许多迥异于传统思路的智能算法, 很好地解决了不少原来非常棘手的复杂工程问题.与蚁群算法齐名的粒子群优化(particle swarm optimization, 简称PSO)算法就是其中最受瞩目,应用最为广泛的成果之一. 本书由粒子群优化算法之父撰写,是该领域毋庸置疑的经典著作.作者......一起来看看 《群体智能》 这本书的介绍吧!