修改程序主题


我们在上一章回中介绍了图片缩放相关的内容,本章回中将介绍如使用主题.闲话休提,让我们一起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文件中的内容。我在这里就不演示程序的运行结果了,建议大家自己动手被动实践。
看官们,关于"如何使用主题"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

相关推荐

  1. vue3中修改element plus 主题

    2024-06-18 06:20:01       64 阅读
  2. vscode 自定义(修改已有)主题教程

    2024-06-18 06:20:01       36 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-06-18 06:20:01       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-06-18 06:20:01       106 阅读
  3. 在Django里面运行非项目文件

    2024-06-18 06:20:01       87 阅读
  4. Python语言-面向对象

    2024-06-18 06:20:01       96 阅读

热门阅读

  1. c++ | 动态编译|虚函数表|虚函数

    2024-06-18 06:20:01       36 阅读
  2. antd vue 输入框基础案例

    2024-06-18 06:20:01       23 阅读
  3. 课时158:脚本发布_简单脚本_远程执行

    2024-06-18 06:20:01       31 阅读
  4. vue 修改页面 刷新页面 增删改 provide / inject

    2024-06-18 06:20:01       39 阅读
  5. Elasticsearch在日志分析中的神奇之旅

    2024-06-18 06:20:01       35 阅读
  6. super().__init__()的解析和作用

    2024-06-18 06:20:01       33 阅读
  7. awtk界面实现下拉屏功能

    2024-06-18 06:20:01       40 阅读
  8. linux 压缩命令之tar工具的基本使用

    2024-06-18 06:20:01       36 阅读