Flutter for OpenHarmony 万能游戏库App实战 - 主题切换实现

主题切换是现代应用的重要功能。这篇文章我们来实现一个完整的主题系统，包括浅色主题、深色主题、以及跟随系统主题。通过这个功能，我们能展示如何构建一个灵活的主题管理系统 。

主题提供者

ThemeProvider使用Provider模式管理主题：

dart 复制代码

class ThemeProvider extends ChangeNotifier {
  ThemeMode _themeMode = ThemeMode.system;

  ThemeMode get themeMode => _themeMode;

  void setThemeMode(ThemeMode mode) {
    _themeMode = mode;
    notifyListeners();
  }

  ThemeData getLightTheme() {
    return ThemeData(
      useMaterial3: true,
      brightness: Brightness.light,
      colorScheme: ColorScheme.fromSeed(
        seedColor: Colors.blue,
        brightness: Brightness.light,
      ),
    );
  }

  ThemeData getDarkTheme() {
    return ThemeData(
      useMaterial3: true,
      brightness: Brightness.dark,
      colorScheme: ColorScheme.fromSeed(
        seedColor: Colors.blue,
        brightness: Brightness.dark,
      ),
    );
  }
}

使用ColorScheme.fromSeed创建一致的颜色方案。
支持浅色和深色两种主题。

应用集成

在MyApp中集成主题提供者：

dart 复制代码

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Consumer<ThemeProvider>(
      builder: (context, themeProvider, _) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: themeProvider.getLightTheme(),
          darkTheme: themeProvider.getDarkTheme(),
          themeMode: themeProvider.themeMode,
          home: const HomePage(),
        );
      },
    );
  }
}

使用Consumer监听ThemeProvider的变化。
根据themeMode选择合适的主题。

主题切换UI

在设置页面中实现主题切换：

dart 复制代码

          Card(
            child: Consumer<ThemeProvider>(
              builder: (context, themeProvider, _) {
                return Column(
                  children: [
                    RadioListTile<ThemeMode>(
                      title: const Text('跟随系统'),
                      subtitle: const Text('自动切换主题'),
                      value: ThemeMode.system,
                      groupValue: themeProvider.themeMode,
                      onChanged: (value) {
                        if (value != null) {
                          themeProvider.setThemeMode(value);
                        }
                      },
                    ),
                    const Divider(height: 1),
                    RadioListTile<ThemeMode>(
                      title: const Text('浅色模式'),
                      value: ThemeMode.light,
                      groupValue: themeProvider.themeMode,
                      onChanged: (value) {
                        if (value != null) {
                          themeProvider.setThemeMode(value);
                        }
                      },
                    ),
                    const Divider(height: 1),
                    RadioListTile<ThemeMode>(
                      title: const Text('深色模式'),
                      value: ThemeMode.dark,
                      groupValue: themeProvider.themeMode,
                      onChanged: (value) {
                        if (value != null) {
                          themeProvider.setThemeMode(value);
                        }
                      },
                    ),
                  ],
                );
              },
            ),
          ),

使用RadioListTile让用户选择主题模式。
支持三种模式：跟随系统、浅色、深色。

主题颜色定制

可以通过自定义ColorScheme来定制主题颜色：

dart 复制代码

  ThemeData getLightTheme() {
    return ThemeData(
      useMaterial3: true,
      brightness: Brightness.light,
      colorScheme: ColorScheme.fromSeed(
        seedColor: Colors.blue,
        brightness: Brightness.light,
      ),
      appBarTheme: const AppBarTheme(
        elevation: 0,
        centerTitle: true,
      ),
      cardTheme: CardTheme(
        elevation: 2,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(12),
        ),
      ),
    );
  }

自定义AppBar和Card的样式。
使用Material 3的动态颜色系统。

总结

这篇文章我们实现了一个完整的主题系统。涉及到的知识点包括：

主题管理 - 使用ThemeProvider管理主题
主题定制 - 使用ColorScheme定制主题颜色
Material 3 - 使用Material 3的设计系统
动态颜色 - 使用ColorScheme.fromSeed创建动态颜色
用户选择 - 支持用户选择主题模式
系统集成 - 支持跟随系统主题

主题系统展示了如何构建一个灵活的主题管理系统 。通过完善的主题定制和用户选择，我们能为用户提供一个个性化的应用体验。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net