Flutter组件--ThemeData属性

使用主题可以在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"),
      
    );