Flutter 中的 Theme 使用：全面指南

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'),
              ),
            ),
          ),
        );
      },
    ),
  );
}

结语

Theme 是 Flutter 中一个非常有用的工具，它允许你定义和应用一致的设计风格，同时提供足够的灵活性来定制应用的外观。掌握 Theme 的使用，可以帮助你创建出既美观又具有良好用户体验的应用。