第七十四回：如何使用主题

我们在上一章回中介绍了图片缩放相关的内容，本章回中将介绍如使用主题.闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在这里说的主题包含两方面的内容：

• 第一方面是指MaterialApp的theme属性，通过修改该属性可以修改程序中的颜色和字体等内容。在实际项目中，程序的颜色和字体等内容是统一进行管理的，这样内容都属于主题的范畴。
• 第二方面是指给组件外层封装一层主题，使用该主题覆盖父主题，该方法可以单独修改某个组件的主题。

如果有看官不理解的话先不着急，本章回将介绍详细介绍这两个方面的内容。

使用方法

自定义主题

自定义主题主要用来给MaterialApp的theme属性赋值，我们通过创建一个ThemeData对象来实现自定义主题。在创建ThemeData对象时，可以依据项目需求自行修改主题中的某个颜色，比如修改primarySwatch属性对应的值为black，可以把主题中的主要颜色修改为black（默认是blue)。把自定义的主题的对象赋值给theme属性后，程序中的主要颜色就会变成black，而其它的颜色仍然是默认主题中的颜色。

覆盖父主题

覆盖父主题表示自定义一个子主题，子主题中修改了父主题中的部分颜色配置。首先通过Theme.of(context)方法获取到父主题，然后使用父主题的copyWith()方法获取部分颜色，这样就可以修改这些颜色的值了。

覆盖主题还有另外一种用法，也就是我们在上一小节中说的第二方面的内容。详细的使用方法如下：
创建一个Theme组件，在该组件的data属性使用相关的主题，同时把另外一个组件赋值给该组件的child属性，这样就相当于给组件外层封装了一层主题，该主题只能单独修改被封装组件的主题，不会影响到其它组件使用的主题。

示例代码

//自定义主题
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文件中的内容。我在这里就不演示程序的运行结果了，建议大家自己动手被动实践。

看官们，关于"如何使用主题"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!