javascript - 复选框列表不会在 flutter getx 中更新

Question

我在 flutter 项目中使用 GetX 进行状态管理。我的问题是，当我单击复选框时，它会更新 Controller 中的状态，但不会在 UI 中显示结果。一般来说，改变的状态也应该改变 UI。我不确定是什么问题，但我认为在 getx 中使用可观察变量存在错误。如何解决这个问题呢？如果帖子不清楚，请问我。

这是 View 。

class FilterBottomSheetWidget extends GetView<SearchController> {
@override
Widget build(BuildContext context) {
  return Container(
  height: Get.height - 90,
  child: Stack(
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.only(top: 80),
        child: Container(
          padding: EdgeInsets.only(top: 20, bottom: 15, left: 4, right: 4),
          child: controller.expiringContractStatus.isEmpty ? CircularLoadingWidget(height: 100)
            : SingleChildScrollView(
              scrollDirection: Axis.vertical,
              child: ExpansionTile(
                      title: Text("Contract Status".tr, style: Get.textTheme.bodyText2),
                      children: List.generate(controller.expiringContractStatus.length, (index) {
                        var _expiringContractStatus = controller.expiringContractStatus.elementAt(index);
                        return CheckboxListTile(
                          controlAffinity: ListTileControlAffinity.trailing,
                          value: _expiringContractStatus["isCheck"], // ************
                          onChanged: (value) {
                            controller.itemChange(value, index); // ************
                            controller.update();
                          },
                          title: Text(
                            _expiringContractStatus["title"],
                            style: Get.textTheme.bodyText1,
                            overflow: TextOverflow.fade,
                            softWrap: false,
                            maxLines: 1,
                          ),
                        );
                      }),
                      initiallyExpanded: true,
                    );
                  }                   
            )
        ),
      ),
     // more widgets
    ],
  ),
);
 }
 }

这是搜索 Controller 。

class SearchController extends GetxController {
final expiringContractStatus = <Map>[
  {
    "title": "aaa",
    "isCheck": false
  },
  {
    "title": "bbb",
    "isCheck": false
  },
  {
    "title": "ccc",
    "isCheck": false
  }        
].obs;

@override
void onInit() async {
  await refreshSearch();
  super.onInit();
}

void itemChange (bool value, int index) {
  expiringContractStatus[index]["isCheck"] = value; // *************
  update();
}
}

Answer 1

更新的答案:

如果您尝试包装一个 Obx但它没有用，使用 GetBuilder<SearchController>相反。

GetBuilder<SearchController>(
    builder: (_) =>  controller.expiringContractStatus.isEmpty ? CircularLoadingWidget(height: 100)
            : SingleChildScrollView(...))

当您调用 update() 时无论如何，它都会使用更新后的值触发重建。我能想到的唯一原因 Obx没有用的是，当涉及列表时，也许只响应列表中项目的添加或删除，而不响应嵌套在其中的属性的更改。

一般来说，您可能会发现在大多数情况下，实际上并不需要使用基于可观察流的变量。 GetBuilder可以处理大部分或全部你需要做的事情，除非你正在做一些基于流的事情(例如绑定(bind)到外部 Firebase 集合)。两者都没有错，但是GetBuilder是性能最高的选项，因为就其性质而言，流的成本要高一些。

原答案:

我建议您先阅读有关正确使用的文档，然后再声称其他人的代码中存在错误。这适用于您正在使用的任何包。

整个 Readme 都有说明在基本计数器应用程序示例中，可观察变量需要放置在 Obx 中小部件，否则没有任何东西会根据可观察的 GetX 变量的更新状​​态触发重建。

您的 child Container应该是

Obx(() => controller.expiringContractStatus.isEmpty ? CircularLoadingWidget(height: 100)
            : SingleChildScrollView(...))