Flutter组件--ThemeData属性

~废弃回忆 �༄

已于 2022-11-21 10:56:38 修改

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Flutter 文章标签： flutter ThemeData

于 2022-11-19 18:05:56 首次发布

本文链接：https://blog.csdn.net/eastWind1101/article/details/127939814

Flutter 专栏收录该内容

67 篇文章

订阅专栏

本文介绍Flutter中主题的应用方法，包括全局主题配置、局部主题覆盖及主题扩展技巧。通过使用ThemeData，开发者可以轻松定制应用程序的颜色方案和字体样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用主题可以在App里面共享颜色和字体样式.在Flutter里面有两种方式来使用主题,一种是全局范围的,一种是使用Theme Widget,Theme Widget可以在App的某个部分使用主题.全局的主题其实也就是MaterialApp将Theme作为跟Widget了.

ThemeData({
    brightness: colorScheme.brightness,//深色还是浅色,也就是暗黑模式还是正常模式
    MaterialColor? primarySwatch//主题颜色样本(设置后,导航栏,tabbar颜色,悬浮按钮颜色,switch按钮的默认颜色都是该颜色.)
    Color? primaryColor,//主色,单独设置导航栏和tabbar颜色
    Color? accentColor,//次颜色,决定大多数widget的颜色,如进度条, switch开关,悬浮按钮等
    Color cardColor,//卡片颜色
    Color dividerColor,//分割线颜色
    ButtonThemeData buttonTheme,/*
按钮主题(按钮默认最小宽度是88,高度是36),可以全局设定按钮的大小
实例:
 buttonTheme: ButtonThemeData(

height:44,
minWidth:60,
buttonColors:colors.red, 
).*/
    Color cursorColor,//输入框光标颜色
    Color? dialogBackgroundColor,//对话框背景颜色
    TextTheme? textTheme,
/*
全局设置字体主题,包括标题,body等文字样式
textTheme: TextTheme(

body1:textStyle(fontSize:16),//body1是系统默认的字体大小14.这些将全局改为16.body2是默认14号字体的加粗样式.
)
*/
    iconTheme: iconTheme,//icon默认样式
    TargetPlatform  platform,//指定平台,应用特定平台控件风格
    })

创建全局主题:

MaterialApp接收一个theme的参数,类型为ThemeData,为App提供的颜色和字体.支持的参数可以在这里查看.

MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.blue,
      ),
);

创建布局主题:

如果想为某个页面使用不同与App的风格,可以使用Theme来覆盖App的主题

Theme(
      data: ThemeData(
        accentColor: Colors.blue,
      ),
      child: Text("hellol world"),
      
    );

覆盖(扩展)主题:

如果不想覆盖所有的样式,可以继承App的主题,只覆盖部分样式,使用copyWith方法.

Theme(
      data: Theme.of(context).copyWith(accentColor: Colors.yellow)
      child: Text("hellol world"),
      
    );