0

我的应用程序当前在 Drawer 中有一个 SwitchTile 来设置主题，但我还想使用 IconButton 在详细信息页面中更改它。

我是 Flutter 和编程的新手，所以我不是专家，我认为我以错误的方式使用 onPressed 事件。

我在 IconButton 旁边放了一个开关，通过它我可以在两个主题之间切换。当我按下 IconButton 时，奇怪的部分出现了，只有 Switch 改变了它的状态，但应用程序没有改变主题（即使 IconButton 的图标也改变了，但就是这样）。

您能告诉我如何修复我的代码以使其适用于抽屉中的 SwitchTile 和详细信息页面中的图标按钮吗？

谢谢！这是我的代码：

主要.dart

class Innario extends StatelessWidget {
  @override
  Widget build(BuildContext context) => ChangeNotifierProvider(
        create: (context) => ThemeProvider(),
        builder: (context, _) {
          final themeProvider = Provider.of<ThemeProvider>(context);
          return MaterialApp(
            debugShowCheckedModeBanner: false,
            themeMode: themeProvider.themeMode,
            theme: MyTheme.lightTheme,
            darkTheme: MyTheme.darkTheme,
            title: 'Inni di Lode',
            home: SafeArea(
              child: Home(),
            ),
          );
        },
      );
}

提供者.dart

class ThemeProvider extends ChangeNotifier {
  ThemeMode themeMode = ThemeMode.light;
  bool get isDarkMode => themeMode == ThemeMode.dark;
  void toggleTheme(bool isOn) {
    themeMode = isOn ? ThemeMode.dark : ThemeMode.light;
    notifyListeners();
  }
}

抽屉.dart

      SwitchListTile(
        secondary: Icon(
          themeProvider.isDarkMode ? Icons.dark_mode : Icons.light_mode,
        ),
        title: const Text('Tema'),
        value: themeProvider.isDarkMode,
        onChanged: (value) {
          final provider =
              Provider.of<ThemeProvider>(context, listen: false);
          provider.toggleTheme(value);
        },
      ),

细节.dart

        IconButton(
          icon: Icon(
            themeProvider.isDarkMode
                ? Icons.dark_mode
                : Icons.light_mode,
          ),
          tooltip: 'Cambia Tema',
          onPressed: () {
            setState(() {
              Provider.of<ThemeProvider>(context, listen: false)
                      .themeMode =
                  themeProvider.isDarkMode
                      ? ThemeMode.light
                      : ThemeMode.dark;
            });
          },
        ),
        Switch(
          value: themeProvider.isDarkMode,
          onChanged: (value) {
            final provider =
                Provider.of<ThemeProvider>(context, listen: false);
            provider.toggleTheme(value);
          },
        ),
4

1 回答 1

0

将所有代码包装在要更改主题的提供者的消费者中。并使用该方法在应用程序的任何位置更改主题。只需将您的小部件与消费者一起包装，它就会对您有所帮助。

于 2022-03-02T12:45:04.170 回答