Flutter中点击按钮切换应用主题的实现求助

你的核心问题在于状态管理逻辑混乱：ThemeChooser作为无状态组件无法维护状态，子组件MainWidget修改的局部状态无法传递给父组件，且自定义的CustomThemeController缺少主题切换的核心逻辑。以下是重构后的完整解决方案：

关键修改点 #

1. 将ThemeChooser改为有状态组件，统一管理主题控制器实例
2. 修复CustomThemeController，添加主题切换方法并支持状态通知
3. 移除冗余的按钮状态变量，直接通过主题控制器的状态判断按钮禁用状态
4. 使用Provider实现全局状态共享，避免手动传递状态

修改后完整代码 #

1. 修复主题控制器 #

class CustomThemeController extends ChangeNotifier {
  final String providerId;
  final Map<String, ThemeData> themes;
  final String defaultThemeId;
  final bool saveThemesOnChange;
  final bool loadThemeOnInit;

  // 改为可修改的状态变量，用于记录当前主题
  late ThemeData _currentTheme;
  late String _currentThemeId;

  CustomThemeController({
    required this.providerId,
    required this.themes,
    required this.defaultThemeId,
    this.saveThemesOnChange = true,
    this.loadThemeOnInit = false,
  })  : _currentThemeId = defaultThemeId,
        _currentTheme = themes[defaultThemeId] ?? ThemeData.light();

  ThemeData get currentTheme => _currentTheme;
  String get currentThemeId => _currentThemeId;

  // 新增主题切换方法，修改后通知UI更新
  void switchTheme(String themeId) {
    if (themes.containsKey(themeId)) {
      _currentThemeId = themeId;
      _currentTheme = themes[themeId]!;
      notifyListeners();

      // 可选：保存主题到本地（需引入shared_preferences包）
      if (saveThemesOnChange) {
        // SharedPreferences.getInstance().then((prefs) => prefs.setString('theme_id', themeId));
      }
    }
  }
}

2. 重构ThemeChooser为有状态组件 #

List<AppTheme> themesNotInClass = [
  AppTheme(
    id: 'superhero_theme',
    description: "Super Hero Theme",
    data: superheroTheme,
  ),
  AppTheme(
    id: 'blue_theme',
    description: "Blue Theme",
    data: ThemeData.light(),
  )
];

class ThemeChooser extends StatefulWidget {
  const ThemeChooser({Key? key}) : super(key: key);
  static const String routeName = "/testingthemechooser";

  @override
  State<ThemeChooser> createState() => _ThemeChooserState();
}

class _ThemeChooserState extends State<ThemeChooser> {
  late CustomThemeController themeController;

  @override
  void initState() {
    super.initState();
    // 初始化主题控制器，避免每次build重新创建
    themeController = CustomThemeController(
      providerId: 'provider_provider',
      themes: {
        'superhero_theme': superheroTheme,
        'blue_theme': ThemeData.light(),
        'default_theme': ThemeData.light(),
      },
      defaultThemeId: 'default_theme',
    );
    // 可选：加载本地保存的主题
    _loadSavedTheme();
  }

  Future<void> _loadSavedTheme() async {
    // 从本地读取保存的主题ID（需引入shared_preferences包）
    // final prefs = await SharedPreferences.getInstance();
    // String? savedThemeId = prefs.getString('theme_id');
    // if (savedThemeId != null && themeController.themes.containsKey(savedThemeId)) {
    //   themeController.switchTheme(savedThemeId);
    // }
  }

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider.value(
      value: themeController,
      child: ThemeProvider(
        saveThemesOnChange: true,
        loadThemeOnInit: false,
        onInitCallback: (controller, previouslySavedThemeFuture) async {
          String? savedTheme = await previouslySavedThemeFuture;
          if (savedTheme != null) {
            controller.setTheme(savedTheme);
          } else {
            Brightness platformBrightness = SchedulerBinding.instance.window.platformBrightness;
            if (platformBrightness == Brightness.dark) {
              controller.setTheme('superhero_theme');
            }
          }
        },
        themes: themesNotInClass,
        child: const MainWidget(),
      ),
    );
  }
}

3. 简化MainWidget，依赖全局状态 #

class MainWidget extends StatelessWidget {
  const MainWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final themeController = Provider.of<CustomThemeController>(context);
    return MaterialApp(
      title: "Theme Chooser",
      theme: themeController.currentTheme,
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Theme Chooser"),
        ),
        body: Consumer<CustomThemeController>(
          builder: (context, controller, _) {
            return ListView(
              children: [
                ListTile(
                  title: const Text("Super Hero"),
                  trailing: ElevatedButton(
                    onPressed: controller.currentThemeId == 'superhero_theme'
                        ? null
                        : () => controller.switchTheme('superhero_theme'),
                    child: const Text("Switch"),
                  ),
                ),
                ListTile(
                  title: const Text("Blue Theme"),
                  trailing: ElevatedButton(
                    onPressed: controller.currentThemeId == 'blue_theme'
                        ? null
                        : () => controller.switchTheme('blue_theme'),
                    child: const Text("Switch"),
                  ),
                ),
                ListTile(
                  title: const Text("Default Theme"),
                  trailing: ElevatedButton(
                    onPressed: controller.currentThemeId == 'default_theme'
                        ? null
                        : () => controller.switchTheme('default_theme'),
                    child: const Text("Switch"),
                  ),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

class ThemeOptions implements AppThemeOptions {
  final Color specificButtonColor;
  ThemeOptions(this.specificButtonColor);
}

逻辑说明 #

• 主题状态完全由CustomThemeController管理，所有组件通过Provider获取同一实例，避免状态不一致
• 按钮点击直接调用控制器的switchTheme方法，自动通知UI更新主题
• 移除了冗余的button1pressed等局部变量，按钮禁用状态直接通过当前主题ID判断
• 预留了本地主题保存的逻辑，可根据需求引入shared_preferences包实现持久化

内容的提问来源于stack exchange，提问作者Jinan Mswi