Mobx Observer 不处理 ObservableList 项目

Question

我正在尝试选中和取消选中列表中的项目，但我无法更改复选框的状态，它只是在我向列表中添加另一个项目时发生变化。如果我在 CheckBox Onchanged 方法中添加 setState 方法，它就可以工作。

我尝试了一些东西但没有任何改变

帮助代码：

商店：

import 'package:mobx/mobx.dart';
import 'package:mobxlearn/TodoApp/models/todo.model.dart';
part 'todo.store.g.dart';

class TodoStore = _TodoStoreBase with _$TodoStore;

abstract class _TodoStoreBase with Store {

  @observable
  var todoList = ObservableList<TodoItem>();

   @action
   void addTask(TodoItem task){
     todoList.add(task);
   }

}

待办事项：

import 'package:mobx/mobx.dart';
part 'todo.model.g.dart';

class TodoItem = _TodoItemBase with _$TodoItem;

abstract class _TodoItemBase with Store {

  @observable
  String title;

  @observable
  bool checked;

  @action
  void check(bool checkValue){
    print("item checkado - $checkValue");
    checked = checkValue;
  }


}

查看：

import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:mobxlearn/TodoApp/models/todo.model.dart';
import 'package:mobxlearn/TodoApp/stores/todo.store.dart';

class TodoHome extends StatelessWidget {
  final todo = TodoStore();

  final todoController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Container(
        child: Column(
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            children: <Widget>[
              Expanded(
                child: TextField(
                  controller: todoController,
                  decoration: InputDecoration(
                    enabledBorder: OutlineInputBorder(),
                    focusedBorder: OutlineInputBorder(),
                    focusColor: Colors.purple,
                  ),
                  style: TextStyle(fontSize: 18, color: Colors.black),
                ),
              ),
              VerticalDivider(),
              MaterialButton(
                color: Colors.purple,
                child: Text(
                  "Add Task",
                  style: TextStyle(color: Colors.white),
                ),
                onPressed: () {
                  if (todoController.text.isNotEmpty) {
                    final todoItem = TodoItem();
                    todoItem.title = todoController.text;
                    todoItem.checked = true;
                    todo.addTask(todoItem);
                    todoController.text = "";
                    print(todo.todoList.toString());
                  }
                },
              )
            ],
          ),
        ),
        Divider(),
        Expanded(
          child: Observer(
            builder: (_) => ListView.builder(
                itemCount: todo.todoList.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    leading: Checkbox(
                        value: todo.todoList[index].checked,
                        onChanged: (boolean) {
                          print(boolean);
                          todo.todoList[index].check(boolean);
                        }),
                    title: Text(todo.todoList[index].title),
                    onTap: () {},
                  );
                }),
          ),
        )
      ],
    ));
  }
}

谢谢!!!!

Answer 1

所以在观看视频后我得到了解决方案，当我们使用 Observablelist 并且我们想要更改此列表的项目状态时，我们不能只创建列表的观察者，我们需要为每个项目和列表创建一个观察者：

我需要创建一个自定义项目并将观察者设置为：

class CustomItem extends StatelessWidget {
  final TodoItem item;
  CustomItem({this.item});

  @override
  Widget build(BuildContext context) {
    return Observer(
      builder: (_) {
        return ListTile(
          leading: Checkbox(value: item.checked, onChanged: item.setCheck),
          title: Text(item.title),
        );
      },
    );
  }
}

在我看来，我也需要在列表中设置一个观察者：

Expanded(
          child: Observer(
          builder: (_) {
            return ListView.builder(
                itemCount: controller.list.length,
                itemBuilder: (context, index) {
                  var item = controller.list[index];
                  return CustomItem(item: item);
                });
          },
        ))

Mobx Observer 不处理 ObservableList 项目

Mobx Observer not working on a ObservableList item

observablelist

flutter

mobx

rxdart

bloc