携手创作，一起成长！这是我参与「日新方案 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，也能够根据实际情况选择自己需求的。
