Flutter学习之实现自定义themes详解
作者:程序那些事 时间:2022-04-17 17:20:49
简介
一般情况下我们在flutter中搭建的app基本上都是用的是MaterialApp这种设计模式,MaterialApp中为我们接下来使用的按钮,菜单等提供了统一的样式,那么这种样式能不能进行修改或者自定义呢?
答案是肯定的,一起来看看吧。
MaterialApp中的themes
MaterialApp也是一种StatefulWidget,在MaterialApp中跟theme相关的属性有这样几个:
final ThemeData? theme;
final ThemeData? darkTheme;
final ThemeData? highContrastTheme;
final ThemeData? highContrastDarkTheme;
final ThemeMode? themeMode;
先来看下ThemeMode的定义:
enum ThemeMode {
system,
light,
dark,
}
ThemeMode是一个枚举类,里面有三个枚举值,分别是system,light和dark。
我们都知道现在手机有一个暗黑模式,ThemeMode的这三种模式就是为了适应暗黑模式而生的。
system表示是系统默认的模式,light是明亮模式,dark是暗黑模式。
而ThemeData则定义了主题中各种组件或者行动的配色。
那么如果我们想要实现自定义themes的功能,就可以利用这个ThemeData类来重写其中要重写的颜色。
ThemeData中还有专门为color变化定义的ColorScheme,还有为Text变化设置的TextTheme,这两个theme实际上是一系列的color集合。
除了ThemeData,flutter中还有一个类叫做Theme。
Theme是一个StatelessWidget,这个widget中包含了ThemeData,它提供了一个Theme.of方法来让子widget获得最近的ThemeData数据。
这就意味着,在flutter中,子widget可以使用和父widget不同的主题,非常的棒。
自定义themes的使用
那么如何使用自定义themes呢?有两种方式。
第一种就是在使用MaterialApp的时候传入自定义的themes,如下所示:
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
但是这种操作实际是传入了一个全新的ThemeData,假如我们只想修改部分ThemeData中的数据应该如何处理呢?
我们可以使用Theme.of方法从当前的Theme中拷贝一份,然后再调用copyWith方法,传入要修改的自定义属性即可。
如下所示:
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: Theme.of(context).copyWith(useMaterial3: true),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
前面我们提到了Theme这个widget,我们还可以将要自定义Theme的widget用Theme包裹起来,理论上我们可以将任何widget都用Theme来进行包装。
比如之前的floatingActionButton的实现是直接返回一个FloatingActionButton:
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
)
然后我们可以把FloatingActionButton用Theme包装起来,如下所示:
floatingActionButton: Theme(
data: Theme.of(context).copyWith(focusColor: Colors.yellow),
child: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
)
这样不同的组件就拥有了不同的theme。
来源:https://juejin.cn/post/7207242529095598139
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Android中FontMetrics的几个属性全面讲解
![](https://img.aspxhome.com/file/2023/5/108305_0s.png)
C# Dynamic之:ExpandoObject,DynamicObject,DynamicMetaOb的应用(上)
![](https://img.aspxhome.com/file/2023/1/74811_0s.jpg)
浅谈Java变量的初始化顺序详解
Unity3D实现人物转向与移动
java实现的各种排序算法代码示例
Android简单实现圆盘抽奖界面
![](https://img.aspxhome.com/file/2023/2/101872_0s.jpg)
关于SpringBoot中controller参数校验的使用
![](https://img.aspxhome.com/file/2023/3/64063_0s.png)
IDEA插件之彩虹括号Rainbow Brackets使用介绍
![](https://img.aspxhome.com/file/2023/5/98125_0s.png)
深入了解C#设计模式之订阅发布模式
Java线程中的常见方法(start方法和run方法)
![](https://img.aspxhome.com/file/2023/4/68694_0s.png)
Java 是如何利用接口避免函数回调的方法
详解Eclipse 字体、字号的设置、最佳字体推荐
![](https://img.aspxhome.com/file/2023/9/60149_0s.png)
springcloud中RabbitMQ死信队列与延迟交换机实现方法
java基础-数组扩容详解
Java实现输出数字三角形实例代码
![](https://img.aspxhome.com/file/2023/4/58304_0s.png)
java如何从不规则的字符串中截取出日期
![](https://img.aspxhome.com/file/2023/7/85547_0s.png)
JavaWeb入门:HttpResponse和HttpRequest详解
![](https://img.aspxhome.com/file/2023/7/82997_0s.png)