Flutter主题-Theme
Theme Widget可以为Material APP 定义主题数据（ThemeData），Material组件库⾥很多Widget都使⽤了主题数据，如导航栏颜⾊、标题字体、Icon样式等。Theme内会使⽤InheritedWidget来为其⼦树Widget共享样式数据。
ThemeData
ThemeData是Material Design Widget库的主题数据，Material库的Widget需要遵守相应的设计规范，⽽这些规范可⾃定义（部分），所以我们可以通过ThemeData来⾃定义应⽤主题，我们可以通过Theme.of⽅法来获取当前的ThemeData。
我们看看ThemeData部分数据：
ThemeData({
Brightness brightness, //深⾊还是浅⾊
MaterialColor primarySwatch, //主题颜⾊样本，见下⾯介绍
Color primaryColor, //主⾊，决定导航栏颜⾊flutter sdk
Color accentColor, //次级⾊，决定⼤多数Widget的颜⾊，如进度条、开关等。
Color cardColor, //卡⽚颜⾊
Color dividerColor, //分割线颜⾊
ButtonThemeData buttonTheme, //按钮主题
Color cursorColor, //输⼊框光标颜⾊
Color dialogBackgroundColor,//对话框背景颜⾊
String fontFamily, //⽂字字体
TextTheme textTheme,// 字体主题，包括标题、body等⽂字样式
IconThemeData iconTheme, // Icon的默认样式
TargetPlatform platform, //指定平台，应⽤特定平台控件风格
...
})
上⾯只是ThemeData的⼀⼩部分属性，完整列表读者可以查看SDK定义。上⾯属性中需要说明的是primarySwatch，它是主题颜⾊的⼀个样本，通过这个样本可以在⼀些条件下⽣成⼀些其他的属性，例如，如果没有指定primaryColor，并且当前主题不是深⾊主题，那么primaryColor就会默认为primarySwatch指定的颜⾊，还有⼀些相似的属性如accentColor、indicatorColor等也会受primarySwatch影响。⽰例
我们实现⼀个路由换肤功能：
class ThemeTestRoute extends StatefulWidget {
@override
_ThemeTestRouteState createState() => new _ThemeTestRouteState();
}
class _ThemeTestRouteState extends State<ThemeTestRoute> {
Color _themeColor = al; //当前路由主题⾊
@override
Widget build(BuildContext context) {
ThemeData themeData = Theme.of(context);
return Theme(
data: ThemeData(
primarySwatch: _themeColor, //⽤于导航栏、FloatingActionButton的背景⾊等
iconTheme: IconThemeData(color: _themeColor) //⽤于Icon颜⾊
),
child: Scaffold(
appBar: AppBar(title: Text("主题测试")),
body: Column(
mainAxisAlignment: ,
children: <Widget>[
//第⼀⾏Icon使⽤主题中的iconTheme
Row(
mainAxisAlignment: ,
children: <Widget>[
Icon(Icons.favorite),
Icon(Icons.airport_shuttle),
Text("  颜⾊跟随主题")
]
),
/
/为第⼆⾏Icon⾃定义颜⾊（固定为⿊⾊)
Theme(
data: pyWith(
iconTheme: pyWith(
color: Colors.black
),
),
child: Row(
mainAxisAlignment: ,
children: <Widget>[
Icon(Icons.favorite),
Icon(Icons.airport_shuttle),
Text("  颜⾊固定⿊⾊")
]
),
),
],
),
floatingActionButton: FloatingActionButton(
onPressed: () =>  //切换主题
setState(() =>
_themeColor =
_themeColor == al ? Colors.blue : al                ),
child: Icon(Icons.palette)
),
),
);
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。