FlutterBasic - GetBuilder、Obx、GetX<Controller>、GetxController 有啥区别

Jinkey2024-11-23 20:34

dart 复制代码

import 'package:get/get.dart';

让我通过对比的方式解释 GetBuilder 和 Obx 的区别：

GetBuilder（手动更新）

GetBuilder 是视图 Widget

dart 复制代码

// 控制器
class CounterController extends GetxController {
    int count = 0;  // 普通变量
    
    void increment() {
        count++;
        update(); // 需要手动调用update()来更新UI
    }
}

// 视图
GetBuilder<CounterController>(
    builder: (controller) {
        return Text('${controller.count}');
    }
)

Obx（自动更新）

Obx 是视图 Widget

dart 复制代码

// 控制器
class CounterController extends GetxController {
    var count = 0.obs;  // 响应式变量，用.obs标记
    
    void increment() {
        count++;  // 自动触发UI更新，不需要调用update()
    }
}

// 视图
Obx(() {
    final controller = Get.find<CounterController>();
    return Text('${controller.count}');
})

对比

特性	GetBuilder	Obx
状态定义	普通变量	响应式变量（.obs）
更新机制	需要手动调用 update()	修改值后自动更新UI
性能表现	更新范围可控，性能较好	自动跟踪依赖，可能有少量性能开销
使用场景	适合简单的状态管理，更新频率低	适合复杂的状态管理，需要频繁更新

GetxController 和 GetX<Controller>

GetxController 是一个控制器 Controller, GetX<Controller> 是一个视图 Widget, 用来在 UI 中使用 GetxController。

dart 复制代码

// 这是控制器的定义
class UserController extends GetxController {
    final name = "".obs;
    final age = 0.obs;
    
    void updateName(String newName) {
        name.value = newName;
    }
}

dart 复制代码

// 这是在UI中使用控制器
class UserPage extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return GetX<UserController>(
            init: UserController(), // 可选：初始化控制器
            builder: (controller) {
                return Column(
                    children: [
                        Text('姓名: ${controller.name}'),
                        Text('年龄: ${controller.age}')
                    ]
                );
            }
        );
    }
}