Flutter GetX 页面级响应式数据使用

12 min read

基本上和Vue3 Ref 的使用没什么区别 , 干掉了 setState , 也干掉了 StatefullWidget ,同时视图的更改也是局部的

  1. 定义响应式数据类型
  2. 对需要更改的内容视图部分使用Obx包裹
class Demo1 extends StatelessWidget {
  Demo1({Key? key}) : super(key: key);
  /// 3种方式声明变量
  // RxInt count = RxInt(0);
  // var count = Rx<int>(0);
  var count = 0.obs;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("GetX"),),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 用Obx包装需要使用变量的widget
            Obx(() => Text(
              "count的值为：$count",
              style: const TextStyle(color: Colors.redAccent,fontSize: 20),
            )),
            const SizedBox(height: 30,),
            ElevatedButton( // 按钮点击count值++
              onPressed: () => count ++,
              child: const Text("点击count++"),
            )
          ],
        ),
      ),
    );
  }
}