obx listView在价值更改后未更新

Question

我有一个rxlist称为tododata。在此列表的基础上，listView.builder构建一个列表，在每个列表中都有一个按钮。单击此按钮后，完成相应项目的字段已更新为true或false。但是，尽管该值已更新，但UI却没有更改。
这是列表：

class StateController extends GetxController {
  RxList<Todo> todoData = <Todo>[
Todo(
    name: 'todo1',
    done: true),
Todo(
    name: 'todo2',
    done: false),
Todo(
    name: 'todo3',
    done: true),
Todo(
    name: 'todo4',
    done: false),
Todo(
    name: 'todo5',
    done: false)
 ].obs;
}

控制器：

  final StateController _controller = Get.find();

更新功能：

void updateItem(Todo e) {
  /* final int index = _controller.todoData.indexOf(e);
  _controller.todoData[index].done = !e.done; */
  _controller.todoData.firstWhere((Todo i) => i == e).done = !e.done;
  _controller.refresh();
}

void deleteItem(Todo e) {     //**this works**
  final int index = _controller.todoData.indexOf(e);
  _controller.todoData.removeAt(index);
}

UI：

Obx(() => ListView.builder(
                          itemCount: _controller.todoData.length,
                          itemBuilder: (_, int i) => TodoItem(
                              item: _controller.todoData[i],
                              updateItem: () =>
                                  updateItem(_controller.todoData[i]),
                        ))

对任何帮助都非常感谢！

Answer 1

obx仅对反应性（RX）变量进行的更改做出反应。您当前拥有的唯一反应性变量是rxlist，因此只有对该列表进行的更改才会触发您的obx更新。

当您更改完成时，您正在更改todo而不是列表中的值，因此不对UI进行更新。

解决此问题的一种方法是在更改完成时强制列表中的更新，您可以通过refresh（）在rxlist refresh（）来执行此操作。 > ：（

void updateItem(Todo e) {
  _controller.todoData.firstWhere((Todo i) => i == e).done = !e.done;
  _controller.todoData.refresh(); // <- Here
}

还假设e是列表中包含的对象，您可以直接执行e.done =！e.done）

Answer 2

我只是修改了您的一些代码，只需将rxlist更改为简单列表和bool变量，然后在bool上使用obx我共享代码

您的模型类和控制器类

    class StateController extends GetxController {
      List<Todo> todoData = <Todo>[
        Todo(name: 'todo1', done: true.obs),
        Todo(name: 'todo2', done: false.obs),
        Todo(name: 'todo3', done: true.obs),
        Todo(name: 'todo4', done: false.obs),
        Todo(name: 'todo5', done: false.obs)
      ].obs;
    }
    
    class Todo {
      String? name;
      RxBool? done;
      Todo({this.name, this.done});
    }

您的UI代码

    class TestClass extends StatelessWidget {
      TestClass({Key? key}) : super(key: key);
      final StateController _controller = Get.put(StateController());
    
      void updateItem(Todo e) {
        /* final int index = _controller.todoData.indexOf(e);
      _controller.todoData[index].done = !e.done; */
        _controller.todoData.firstWhere((Todo i) => i == e).done!.value =
            !e.done!.value;
        _controller.refresh();
      }
    
      void deleteItem(Todo e) {
        //**this works**
        final int index = _controller.todoData.indexOf(e);
        _controller.todoData.removeAt(index);
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            backgroundColor: Colors.white,
            body: ListView.builder(
                itemCount: _controller.todoData.length,
                itemBuilder: (_, int i) => TodoItem(
                      item: _controller.todoData[i],
                      updateItem: () => updateItem(_controller.todoData[i]),
                    )));
      }
    }
    
    class TodoItem extends StatelessWidget {
      TodoItem({Key? key, this.item, this.updateItem}) : super(key: key);
      Todo? item;
      VoidCallback? updateItem;
    
      @override
      Widget build(BuildContext context) {
        return ListTile(
          title: Text(
            item!.name!,
            style: TextStyle(color: Colors.black),
          ),
          subtitle: GestureDetector(
            onTap: updateItem,
            child: Obx(() {
              return Text(
                item!.done!.value.toString(),
                style: TextStyle(color: Colors.black),
              );
            }),
          ),
        );
      }
    }

Answer 3

您可以在这里做一些事情，以使您的代码按预期工作。

首先，您需要确保您的TODO类实现了可衡量的Mixin。这将使您可以按值而不是参考比较两个todo实例。

其次，您需要在rxList上使用update（）方法来更新适当的托多实例的完成字段的值。

第三，您需要在更新完成的字段后在statecontroller上调用refresh（）方法，以便更新UI以反映新值。

第四，您应该考虑使用脚步窗口小部件的内置updateItem（）方法，而不是将回调转到窗口小部件。这将确保在更改完成字段时正确更新待遇小部件。

Answer 4

中调用更新功能

WidgetsBinding.instance.addPostFrameCallback((_) {
            // Update Code Goes Here //
 });

尝试在OBX已经在构建过程中时，在更新 可能不会发生。 addpostframecallback 当前构建允许完成后，它将允许执行。要更新的UI。