[Day17] Flutter with GetX binding (一) 元件与属性绑定

这篇位大家介绍Getx的响应式更新,Widget与属性绑定(int String bool List这几种型别)

controller部分
在此定义了几个属性对应上几个基本型别(int String bool List)
在初始值後加入.obs即完成.
并加上getter setter, 如果不用get set也可以使用只是在Widget端需要
controller.property.value 才能取到值, 所以在controller这里用get包起来.

class BindingPageController extends GetxController {
  //String
  final _someString = ''.obs;
  set someString(value) => this._someString.value = value;
  get someString => this._someString.value;

  //int
  final _someInt = 0.obs;
  set someInt(value) => this._someInt.value = value;
  get someInt => this._someInt.value;

  //bool
  final _someBool = false.obs;
  set someBool(value) => this._someBool.value = value;
  get someBool => this._someBool.value;

  //List
  final _someBasicList = <String>[].obs;
  set someBasicList(value) => this._someBasicList.value = value;
  get someBasicList => this._someBasicList.toList();
  
  @override
  void onInit() {
    super.onInit();
  }
  
  addBasicList() {
    _someBasicList.add("add");
  }
}

Widget部分
Obx(() => Text(controller.属性)),
使属性与画面之间绑定,在此要注意的是
如果在Obx function里, 如果没有任何controller的 .obs的属性,运行时会报错

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(title: Text('BindingPage')),
  body: SafeArea(
    child: SizedBox.expand(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
            Obx(() => Center(child: Text('${controller.someString}'))),
            Obx(() => Center(child: Text('${controller.someInt}'))),
            Obx(() => Center(child: Text('${controller.someBool}'))),
            Obx(() {
             return Expanded(
                flex: 1,
                child: ListView(
                  children: List.generate(controller.someBasicList.length,
                      (index) {
                    final title = controller.someBasicList[index];
                    return Center(child: Text(title));
                  }),
                ),
              );
            },
            ),
        ],
      ),
    ),
  ),
);
}

实际画面