Flutter 使用 Getx 更改主题和 iconbutton 的图标

Question

我有以下示例使用 Getx 从暗模式更改为亮模式。到目前为止它正在工作。但我也希望改变主题的 IconButton 也会改变自己的图标。我做错了什么？

import 'package:flutter/material.dart';
import 'package:get/get.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Change Theme',
      darkTheme: ThemeData.dark(),
      themeMode: ThemeMode.system,
      home: HomeScreen(),
    );
  }
}

// Home Screen
class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
      var selected = true;
    return Scaffold(
      appBar: AppBar(
        title: Text('Change Theme'),
        actions: [
          IconButton(
              icon: Icon(
                selected ? Icons.dark_mode : Icons.light_mode,
              ),
              onPressed: () {
                Get.isDarkMode
                    ? Get.changeTheme(ThemeData.light())
                    : Get.changeTheme(ThemeData.dark());
              })
        ],
      ),
    );
  }
}

Answer 1

您需要将图标包装在 GetX 小部件中，该小部件根据 GetX class.

中的变量重建

创建一个 Getx class，其中包含根据本地布尔值更改主题的函数。

class ThemeController extends GetxController {

bool isDarkMode = true; 

void toggleDarkMode() {
  isDarkMode = !isDarkMode;
  if (isDarkMode) {
   Get.changeTheme(ThemeData.dark());
  } else {
   Get.changeTheme(ThemeData.light());
  }
  update();
}

然后将您的图标包裹在 GetBuilder<ThemeController>

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Get.put(ThemeController());
    return Scaffold(
      appBar: AppBar(
        title: Text('Change Theme'),
        actions: [
         GetBuilder<ThemeController>(
          builder: (controller) =>  IconButton(
              icon: Icon(
                controller.isDarkMode ? Icons.dark_mode : Icons.light_mode,
              ),
           onPressed: () => controller.toggleDarkMode()
          
        ],
      ),
    );
  }
}

我的 VsCode 没有佣金，因为我旅行时网速非常慢，而且我正在进行数小时的不稳定升级。所以可能会有一些语法或小的格式错误，但除此之外这应该有效。

Flutter 使用 Getx 更改主题和 iconbutton 的图标

Flutter change theme and icon of a iconbutton with Getx

flutter

dart

flutter-getx