Flutter GetX 状态管理详解

简介

GetX 是一个轻量且强大的解决方案,集成了状态管理、路由管理和依赖注入。它提供了简单的语法和高性能的响应式编程。

基本概念

控制器

class CounterController extends GetxController {
  var count = 0.obs; // 创建可观察变量
  
  void increment() {
    count++;  // 自动通知UI更新
  }
  
  @override
  void onInit() {
    super.onInit();
    // 控制器初始化
  }
  
  @override
  void onClose() {
    // 控制器销毁
    super.onClose();
  }
}

响应式变量

// 基本类型
final name = 'GetX'.obs;
final count = 0.obs;
final isLogged = false.obs;

// 自定义类
final user = User().obs;

// 列表
final items = <String>[].obs;

基本用法

注册控制器

void main() {
  // 方式1: 全局注入
  Get.put(CounterController());
  
  // 方式2: 懒加载注入
  Get.lazyPut(() => CounterController());
  
  runApp(MyApp());
}

访问状态

// 方式1: Obx
Obx(() => Text('Count: ${controller.count}'));

// 方式2: GetX
GetX<CounterController>(
  builder: (controller) {
    return Text('Count: ${controller.count}');
  },
);

// 方式3: GetBuilder
GetBuilder<CounterController>(
  builder: (controller) {
    return Text('Count: ${controller.count}');
  },
);

完整示例

// 用户模型
class User {
  final String name;
  final int age;
  
  User({required this.name, required this.age});
}

// 用户控制器
class UserController extends GetxController {
  final user = User(name: 'Guest', age: 0).obs;
  final isLoading = false.obs;
  
  void updateUser(String name, int age) {
    user.update((val) {
      val?.name = name;
      val?.age = age;
    });
  }
  
  Future<void> fetchUser() async {
    isLoading.value = true;
    try {
      await Future.delayed(Duration(seconds: 2)); // 模拟网络请求
      updateUser('John Doe', 25);
    } finally {
      isLoading.value = false;
    }
  }
}

// 页面组件
class UserPage extends StatelessWidget {
  final controller = Get.put(UserController());
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('GetX Demo')),
      body: Center(
        child: Obx(() {
          if (controller.isLoading.value) {
            return CircularProgressIndicator();
          }
          
          return Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'Name: ${controller.user.value.name}',
                style: TextStyle(fontSize: 24),
              ),
              Text(
                'Age: ${controller.user.value.age}',
                style: TextStyle(fontSize: 24),
              ),
              ElevatedButton(
                onPressed: () => controller.fetchUser(),
                child: Text('Fetch User'),
              ),
            ],
          );
        }),
      ),
    );
  }
}

// 主应用
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'GetX Demo',
      home: UserPage(),
    );
  }
}

路由管理

基本导航

// 导航到新页面
Get.to(() => SecondPage());

// 替换当前页面
Get.off(() => SecondPage());

// 清空所有页面并导航
Get.offAll(() => HomePage());

// 带参数导航
Get.to(
  () => DetailPage(),
  arguments: {'id': 1},
);

// 获取参数
final args = Get.arguments;

命名路由

GetMaterialApp(
  getPages: [
    GetPage(name: '/', page: () => HomePage()),
    GetPage(name: '/detail', page: () => DetailPage()),
  ],
);

// 导航
Get.toNamed('/detail', arguments: {'id': 1});

依赖注入

绑定控制器

class HomeBinding implements Bindings {
  @override
  void dependencies() {
    Get.put(HomeController());
    Get.put(UserController());
  }
}

GetMaterialApp(
  initialBinding: HomeBinding(),
  // ...
);

服务注入

// 定义服务接口
abstract class ApiClient {
  Future<User> getUser();
}

// 实现服务
class ApiClientImpl implements ApiClient {
  @override
  Future<User> getUser() async {
    // 实现
  }
}

// 注入服务
Get.put<ApiClient>(ApiClientImpl());

// 使用服务
final apiClient = Get.find<ApiClient>();

最佳实践

1. 合理划分控制器职责
2. 使用 Worker 监听状态变化
3. 合理使用依赖注入
4. 注意内存管理
5. 使用命名路由管理导航

注意事项

1. 避免过度使用全局状态
2. 合理处理控制器生命周期
3. 注意响应式变量的性能影响
4. 处理好异步操作
5. 合理组织代码结构

总结

GetX 提供了一套完整的应用开发解决方案,通过简单的API可以快速实现状态管理、路由管理和依赖注入。理解并掌握 GetX 的使用可以显著提高 Flutter 应用的开发效率。