Flutter GetX 之 暗黑模式

在Flutter中使用GetX实现暗黑模式的切换，你可以创建一个GetxController来管理模式状态，并通过Obx来响应式地更新UI。以下是一个简单的示例：

1. 创建一个DarkModeController：

import 'package:get/get.dart';
 
class DarkModeController extends GetxController {
  // 使用Rx变量来保存状态
  var isDarkMode = true.obs;
 
  // 切换模式的方法
  void toggleDarkMode() {
    isDarkMode.value = !isDarkMode.value;
  }
}

2. 在GetMaterialApp中使用DarkModeController：

void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      // 初始化DarkModeController
      home: Home(),
      darkTheme: DarkTheme.themeData.copyWith(
        brightness: Brightness.dark,
      ),
      theme: ThemeData(
        brightness: Brightness.light,
      ),
      themeMode: ThemeMode.system, // 或者ThemeMode.dark
    );
  }
}
 
class Home extends StatelessWidget {
  final DarkModeController controller = Get.put(DarkModeController());
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('暗黑模式切换'),
      ),
      body: Center(
        child: Obx(
          () => Switch(
            value: controller.isDarkMode.value,
            onChanged: (value) {
              controller.toggleDarkMode();
              // 切换主题模式
              Get.changeThemeMode(value ? ThemeMode.dark : ThemeMode.light);
            },
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个DarkModeController来管理当前是否是暗黑模式。在Home页面中，我们使用Obx来确保Switch小部件随着isDarkMode.value的变化而更新。当用户切换开关时，我们调用toggleDarkMode方法更新isDarkMode的值，并使用Get.changeThemeMode方法切换应用的主题模式。