Flutter学习-GetX-03 状态管理

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情

本文主要介绍GetX中的状态管理的几种方式包括Obx，getx等。

1. Obx

对于我们使用Getx进行状态管理通常会根据实际情况进行使用，对于页面的局部变化的时候我们可以使用Obx进行包裹

class Obx extends ObxWidget {
  final WidgetCallback builder;

  const Obx(this.builder);

  @override
  Widget build() => builder();
}

使用

/// final _name = "GetX".obs;
/// Obx(() => Text( _name.value )),... ;

这个 WidgetCallback实际上是一个类似回调的作用，当我们Obx包裹的builder中使用的值发生改变的时候，刷新这个组件

• ObxWidget

abstract class ObxWidget extends StatefulWidget {
  const ObxWidget({Key? key}) : super(key: key);

  @override
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    super.debugFillProperties(properties);
    properties..add(ObjectFlagProperty<Function>.has('builder', build));
  }

  @override
  _ObxState createState() => _ObxState();

  @protected
  Widget build();
}

抽象类abstract继承StatefulWidget因此在状态改变的时候，会通过notifyChildren通知进行回调刷新widget

class _ObxState extends State<ObxWidget> {
  final _observer = RxNotifier();
  late StreamSubscription subs;

  @override
  void initState() {
    super.initState();
    subs = _observer.listen(_updateTree, cancelOnError: false);
  }

  void _updateTree(_) {
    if (mounted) {
      setState(() {});
    }
  }

  @override
  void dispose() {
    subs.cancel();
    _observer.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) =>
      RxInterface.notifyChildren(_observer, widget.build);
}

实际使用

通过拓展让我们的值具有观察者属性

这样当我们的值value发生改变后就会进行通知刷新我们的Widget，做到了响应式。

2.GetBuilder

GetBuilder通常会搭配GetxController进行使用，我们看下GetBuilder的结构

class GetBuilder<T extends GetxController> extends StatefulWidget {
  final GetControllerBuilder<T> builder;
  final bool global;
  final Object? id;
  final String? tag;
  final bool autoRemove;
  final bool assignId;
  final Object Function(T value)? filter;
  final void Function(GetBuilderState<T> state)? initState,
      dispose,
      didChangeDependencies;
  final void Function(GetBuilder oldWidget, GetBuilderState<T> state)?
      didUpdateWidget;
  final T? init;
  }

也是继承于StatefulWidget，只是多了个<T extends GetxController>，让我们可以获取GetxController中的方法或者数据。我们看下实际使用：

/// 提交按钮
Widget get _nextItem => Padding(
      padding: EdgeInsets.symmetric(horizontal: 15.toPadding),
      child: GetBuilder<FeedbackController>(
          id: 'next',
          builder: (_) => PuppyButton(
              onPressed: controller.shouldNext ? controller.feedbackRequest : null,
              style: PuppyButtonStyle.style1,
              child: const Text('提交'))),
    );

这里通常会是通过id进行更新，在我们contrller中处理逻辑完成后主动调用update进行手动更新

这里是可以添加一个数组进行多个 GetBuilder触发更新，相比Obx多了手动的控制。

3. Getx

对于Getx则可以指定controller进行关联，同时可以使用state

class GetX<T extends DisposableInterface> extends StatefulWidget {
  final GetXControllerBuilder<T> builder;
  final bool global;

  // final Stream Function(T) stream;
  // final StreamController Function(T) streamController;
  final bool autoRemove;
  final bool assignId;
  final void Function(GetXState<T> state)? initState,
      dispose,
      didChangeDependencies;
  final void Function(GetX oldWidget, GetXState<T> state)? didUpdateWidget;
  final T? init;
  final String? tag;

使用

GetX<FeedbackController>(
      init: controller,
      initState: (_) {},
      builder: (_) => PuppyButton(
          onPressed: controller.shouldNext ? controller.feedbackRequest : null,
          style: PuppyButtonStyle.style1,
          child: const Text('提交'))),
)

适合控制多个控制器、多种状态更新，可精细控制初始、局部渲染。

4. ValueBuilder

ValueBuilder的组成，可以发现比较简单多了关于value值的变化，可以通过我们初始化的值进行监听变化以及回调从而刷新界面

class ValueBuilder<T> extends StatefulWidget {
 final T? initialValue;
 final ValueBuilderBuilder<T> builder;
 final void Function()? onDispose;
 final void Function(T)? onUpdate;

 const ValueBuilder({
   Key? key,
   this.initialValue,
   this.onDispose,
   this.onUpdate,
   required this.builder,
 }) : super(key: key);

 @override
 _ValueBuilderState<T> createState() => _ValueBuilderState<T>();
}

使用

child: ValueBuilder<int>(
  initialValue: 10,
  builder: (value, updateFun) {
    return Column(
      children: [
        Text('count : ${value.toString()}'),
        ElevatedButton(
      onPressed:()=> updateFun(value + 1),
  child: const Text('add'),
)
      ],
    );
  },
  onUpdate: (value) => print("Value  is updated: $value"),
  onDispose: () => print("Widget unmounted"),
)

适合我们简单的局部控件

5. 小结

在GetX中状态管理中使用比较多的通常是Obx和GetBuilder，也可以根据实际情况选择自己需要的。