Flutter 中的 Theme 使用：全面指南

在 Flutter 中，Theme 是一种强大的机制，用于定义和应用全局或局部的设计风格，包括颜色、字体、形状等。使用 Theme 可以确保你的应用在不同设备和屏幕尺寸上保持一致的外观和感觉。

基础用法

Theme 最基本的用法是定义一组样式，并将其应用于整个应用：

MaterialApp(title: 'Theme Demo',theme: ThemeData(primarySwatch: Colors.blue,visualDensity: VisualDensity.adaptivePlatformDensity,),home: MyHomePage(),
)

在这个例子中，我们为整个应用设置了一个蓝色主题。

自定义主题数据

ThemeData 提供了丰富的属性，允许你定制主题的各个方面：

颜色

primaryColor: 应用的主要颜色。
accentColor: 用于输入框、开关等控件的颜色。

ThemeData(primaryColor: Colors.blue,accentColor: Colors.amber,
)

字体

textTheme: 定义应用中的字体样式。
primaryTextTheme: 主要文本样式，如标题、副标题等。

ThemeData(textTheme: TextTheme(headline1: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),),
)

形状和边距

shape: 定义应用中的形状，如卡片的圆角。
inputDecorationTheme: 输入框的样式。

ThemeData(shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),inputDecorationTheme: InputDecorationTheme(border: OutlineInputBorder(),),
)

使用 ThemeData

ThemeData 可以与 Theme 小部件结合使用，以覆盖应用中的默认样式：

Theme(data: ThemeData(textTheme: TextTheme(bodyText1: TextStyle(color: Colors.green),),),child: Scaffold(appBar: AppBar(title: Text('Custom Theme'),),body: Text('This text has a green color'),),
)

访问 Theme

在 Flutter 中，你可以轻松访问当前的 Theme，而无需使用 Theme.of(context)：

Text('This text uses the bodyText1 style from the current theme',style: Theme.of(context).textTheme.bodyText1,
)

实例：主题切换

实现主题切换是 Theme 的一个常见用法，可以通过 ThemeMode 和 Builder 实现：

ThemeMode themeMode = ThemeMode.light;void changeTheme(ThemeMode mode) {setState(() {themeMode = mode;});
}@override
Widget build(BuildContext context) {return MaterialApp(themeMode: themeMode,home: Builder(builder: (context) {return Scaffold(appBar: AppBar(title: Text('Theme Switcher'),),body: Container(color: Theme.of(context).backgroundColor,child: Center(child: ElevatedButton(onPressed: () {changeTheme(themeMode == ThemeMode.light? ThemeMode.dark: ThemeMode.light);},child: Text(themeMode == ThemeMode.light ? 'Dark Theme' : 'Light Theme'),),),),);},),);
}