文章目录
- 1. 概念介绍
- 2. 使用方法
- 2.1 自定义主题
- 2.2 覆盖父主题
- 3. 示例代码
我们在上一章回中介绍了图片缩放相关的内容,本章回中将介绍如使用主题.闲话休提,让我们一起Talk Flutter吧。
1. 概念介绍
我们在这里说的主题包含两方面的内容:第一方面是指MaterialApp的theme属性,通过修改该属性可以修改程序中的颜色和字体等内容。在实际项目中,程序的颜色
和字体等内容是统一进行管理的,这样内容都属于主题的范畴。第二方面是指给组件外层封装一层主题,使用该主题覆盖父主题,该方法可以单独修改某个组件的主题。
如果有看官不理解的话先不着急,本章回将介绍详细介绍这两个方面的内容。
2. 使用方法
2.1 自定义主题
自定义主题主要用来给MaterialApp的theme属性赋值,我们通过创建一个ThemeData对象来实现自定义主题。在创建ThemeData对象时,可以依据项目需求自行修改
主题中的某个颜色,比如修改primarySwatch属性对应的值为black,可以把主题中的主要颜色修改为black(默认是blue)。把自定义的主题的对象赋值给theme属
性后,程序中的主要颜色就会变成black,而其它的颜色仍然是默认主题中的颜色。
2.2 覆盖父主题
覆盖父主题表示自定义一个子主题,子主题中修改了父主题中的部分颜色配置。首先通过Theme.of(context)方法获取到父主题,然后使用父主题的copyWith()方法
获取部分颜色,这样就可以修改这些颜色的值了。覆盖主题还有另外一种用法,也就是我们在上一小节中说的第二方面的内容。详细的使用方法如下:
创建一个Theme组件,在该组件的data属性使用相关的主题,同时把另外一个组件赋值给该组件的child属性,这样就相当于给组件外层封装了一层主题,该主题只能单
独修改被封装组件的主题,不会影响到其它组件使用的主题。
3. 示例代码
//自定义主题
final ThemeData _customTheme = ThemeData(
//控制AppBar以及它上面内容的背景色
primarySwatch: Colors.orange,
canvasColor: Colors.redAccent,
//控制AppBar以下界面的背景色
scaffoldBackgroundColor:Colors.blue,
);
// MaterialApp的其它属性省略不写
theme: _customTheme,
//对父应主题进行扩展,或者说覆盖父主题
theme: Theme.of(context).copyWith(
primaryColor: Colors.red,
scaffoldBackgroundColor:Colors.redAccent, ),
//使用主题覆盖单独修改第二个图标的颜色
Theme(
data: _themeData.copyWith(
iconTheme: _themeData.iconTheme.copyWith(color: Colors.red),
),
child:Icon(Icons.favorite),
),
我们在这里只列出了核心代码,完整的代码可以参考Github上ex023文件中的内容。我在这里就不演示程序的运行结果了,建议大家自己动手被动实践。
看官们,关于"如何使用主题"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!