Flutter状态管理的另一种优雅处理方式二

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第10天，点击查看活动详情

Flutter的状态管理，以官方文档的计算器为示例，如果采用原生的StatefulWidget来实现，代码如下:

class CounterWidget extends StatefulWidget {
  const CounterWidget({Key? key, this.initValue = 0});

  final int initValue;

  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}


class _CounterWidgetState extends State<CounterWidget> {

  int _counter = 0;

  @override
  void initState() {
    super.initState();
    //初始化状态
    _counter = widget.initValue;
    print("initState");
  }

  @override
  Widget build(BuildContext context) {
    print("build");
    return Scaffold(
      body: Center(
        child: TextButton(
          child: Text('$_counter'),
          //点击后计数器自增
          onPressed: () => setState(
            () => ++_counter,
          ),
        ),
      ),
    );
  }

}

在这个示例中，我们定义了一个_counter变量，用来保存计数器的值，当我们点击触发onPressed后，使用了setState函数来修改_counter的值，这时Flutter框架就会自动调用build方法，将最新的值重新渲染到widgetUI上，达到数据改变界面跟随变化的效果。

但是这中方法处理起来很明显过于繁琐，因此产生了Getx来简化我们的工作。

Obx响应式状态管理

介绍

响应式编程可能会让很多人感到陌生，因为它很复杂，但是GetX将响应式编程变得非常简单。

• 你不需要创建StreamControllers.
• 你不需要为每个变量创建一个StreamBuilder。
• 你不需要为每个状态创建一个类。
• 你不需要为一个初始值创建一个get。

使用 Get 的响应式编程就像使用 setState 一样简单。

定义Obx变量的三种方式

• 第一种 Rx{Type}

  final name = RxStirng('');

  Final count = RxInt(0);

• 第二种 泛型 Rx< Type >

final name = Rx< String >('');

final count = Rx< Int >(0);

• 第三种更实用、更简单、更可取的方法，只需添加 .obs 作为value的属性。

同样还是以计数器为示例，只不过这次采用Getx来实现，让我们对比一下他们两个之间的区别吧。

import 'package:get/get.dart';

class ObxCountExample extends StatelessWidget {
  var count = 0.obs;
  void increment() {
    count++;
  }

  @override
  Widget build(BuildContext context) {
    return Center(
        child: Column(
          children: [
            Obx(() => Text(
              "count的值为: $count",
              style: TextStyle(color: Colors.red, fontSize: 30),
            )),
            ElevatedButton(
              onPressed: () {
                increment();
              },
              child: Text("点我加1"))
          ],
        ),
      );
  }
}

在这个示例中，我们提供Getx提供的.obx来实现响应式的数据状态管理， 并且在使用到数据的widget组件中，使用了Obx(()=> widget)，用包裹，达到数据改变界面跟随改变的效果。

两种对比起来很明显可以看出，Getx对应数据状态管理比起原生的Flutter的StatefulWidget更加便捷。