Flutter Theme Widget
Flutter 的 Theme Widget 可以用于在整个应用程序中统一定义一组 Widget 的样式、颜色等属性。Theme Widget 可以定义全局的主题,并且可以在子 Widget 中覆盖全局主题中的某些属性,从而实现局部主题的定制。
示例代码:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
accentColor: Colors.red,
fontFamily: 'Roboto',
textTheme: TextTheme(
headline1: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),
bodyText1: TextStyle(fontSize: 16.0, color: Colors.black),
button: TextStyle(fontSize: 16.0, color: Colors.white),
),
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('My App'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Hello, Flutter!',
style: Theme.of(context).textTheme.headline1,
),
RaisedButton(
child: Text('Click me!'),
onPressed: () {},
color: Theme.of(context).accentColor,
textColor: Theme.of(context).textTheme.button.color,
),
],
),
),
);
}
}
上述代码展示了如何使用 Theme Widget 定义全局主题,并在子 Widget 中使用全局主题中定义的样式、颜色等属性。其中,ThemeData 可以定义一组主题属性,包括 primarySwatch、accentColor、fontFamily、textTheme 等。在子 Widget 中,可以使用 Theme.of(context) 获取全局主题,并使用 ThemeData 中定义的属性来设置子 Widget 的样式、颜色等属性。
使用 Theme Widget 可以实现整个应用程序中一致的样式和颜色,同时还可以在需要的时候进行局部定制,从而更好地控制应用程序的视觉效果。