Flutter GetX 简单状态管理器例子

17 min read
  1. 实现一个自定义 Controller 类继承自 GetxController ，Controller 中进行业务逻辑的处理，
  2. 当需要改变状态数据时调用update() 来通知数据改变。
  3. 视图层使用GetBuilder进行包裹
  4. 当Controller的数据发生变化化时,视图更新
  5. 因为作用域的,非GetxController包裹的部分通过Get.find() 找到已经实例化的这个Controller类

使用 Controller 实现计数器例子：

class CounterController extends GetxController{
  int count = 0;

  void increment(){
    count ++ ;
    update();
  }
}


class CounterPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: const Text("Counter"),
      ),
      body: Center(
        child: Column(
            mainAxisSize:MainAxisSize.min,
          children: [
            
            GetBuilder<CounterController>(
              init: CounterController(), /// 初始化 Controller
              builder: (controller) {
                return Text("${controller.count}", style: const TextStyle(fontSize: 50));
              }),
            
            GetBuilder<CounterController>(  ///没有进行初始化
                builder: (controller) {
                  return Text("${controller.count}", style: const TextStyle(fontSize: 50));
                }),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () {
          ///这里因为作用域的问题无法使用直接拿到 controller 需要通过 find 找到 Controller
          CounterController controller = Get.find();
          ///调用 Controller 方法
          controller.increment();
        },
      ),
    );
  }
}