Flutter完全开发手册
  • Flutter Getx 状态管理 高性能的响应式状态管理

    GetX 是一个轻量且强大的解决方案,拥有高性能的状态管理、智能的依赖注入以及便捷的路由管理。
    当我们想在一个或多个页面/组件/widget 之间共享数据状态,我们可以使用 Flutter 的状态管理来实现。Getx 为我们提供了高性能的响应式状态管理。

    有三种方式声明一个响应式变量

    第一种 使用 Rx{Type}

    
    final name = RxString('');
    final isLogged = RxBool(false);
    final count = RxInt(0);
    final balance = RxDouble(0.0);
    final items = RxList([]);
    final myMap = RxMap({});
    

    第二种 使用 Rx,规定泛型 Rx。

    
    final name = Rx('');
    final isLogged = Rx(false);
    final count = Rx(0);
    final balance = Rx(0.0);
    final number = Rx(0)
    final items = Rx>([]);
    final myMap = Rx>({});
    自定义类 - 可以是任何类
    final user = Rx();
    

    第三种 添加 .obs 作为value的属性,实用、简单、方便。(推荐使用)

    
    final name = ''.obs;
    final isLogged = false.obs;
    final count = 0.obs;
    final balance = 0.0.obs;
    final number = 0.obs;
    final items = [].obs;
    final myMap = {}.obs;
    自定义类 - 可以是任何类
    final user = User().obs;
    

    定义一个响应式变量,只需在变量的末尾加上一个 .obs 就可将变量定义为响应式变量

    计数器示例

    使用响应式变量实现计数器功能:

    
    class MyHomePage extends StatelessWidget {
      var count = 0.obs;
      
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: const Text("Getx状态管理"),
          ),
          body: Center(
            child: Obx(() => Text("${count.value}", style: const TextStyle(fontSize: 50))),
          ),
          floatingActionButton: FloatingActionButton(
            child: const Icon(Icons.add),
            onPressed: (){
              _count ++;
            },
          ),
        );
      }
    }
    

    上述代码就实现了简单的计数器功能,仔细查看发现并没有使用 StatefulWidget 也能实现计数的自动更新。这就是响应式变量的强大之处。

    刷新界面

    在界面上使用响应式变量只需在使用变量的控件上包裹 Obx 即可实现响应式更新,即变量的值发生变化时自动刷新界面:

    
    Obx(() => Text("${count.value}"))
    
    上一篇:Flutter Getx路由管理,页面跳转与传值下一篇:Flutter Getx 状态管理、 多页面数据共享