Flutter：当我修改一个项目时，我的列表视图没有更新

Question

我正在使用 BloC 架构模式开发一个“待办事项”颤振应用程序。

我的“主页”界面显示待办事项列表，用户可以单击项目的按钮将状态从“待办事项”更改为“完成”。

当一个项目完成时，它应该以不同于其他未完成的待办事项的另一种颜色显示。

但是当我点击“完成”按钮时，列表视图没有更新。

下面是我的 UI 代码：

class HomePage extends StatelessWidget {
  final TodoRepository _todoRepository;
  final HomeBloc bloc;

  HomePage(this._todoRepository) : this.bloc = HomeBloc(_todoRepository);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: StreamBuilder<List<Task>>(
            stream: bloc.todos,
            builder: (context, snapshot) {
              return ListView(
                children: snapshot.data.map(_buildItem).toList(),
              );
            }),
      ),
    );
  }

  Widget _buildItem(Todo todo) {
    if (todo.complete) {
      return completed(todo);
    } else {
      return inCompleted(todo);
    }
  }

  Widget inCompleted(Todo todo) {
    return MaterialButton(
      textColor: Colors.white,
      color: Colors.green,
      child: Text("Complete"),
      onPressed: () {
        bloc.done.add(todo);
      }
    );
  }

  Widget completed(Todo todo) {
    return MaterialButton(
      textColor: Colors.white,
      color: Colors.red,
      child: Text("Cancel"),
      onPressed: () {
        bloc.done.add(todo);
      }
    );
  }
}

这是我的 BloC 课程：

class HomeBloc {

  final _getTodosSubject = PublishSubject<List<Todo>>();
  final _doneTodoSubject = PublishSubject<Todo>();
  final _cancelTodoSubject = PublishSubject<Todo>();

  final TodoRepository _todoRepository;

  var _todos = <Todo>[];

  Stream<List<Todo>> get todos => _getTodosSubject.stream;

  Sink<Todo> get done => _doneTodoSubject.sink;

  Sink<Todo> get cancel => _doneTodoSubject.sink;

  HomeBloc(this._todoRepository) {
    _getTodos().then((_) {
      _getTodosSubject.add(_todos);
    });

    _doneTodoSubject.listen(_doneTodo);

    _cancelTodoSubject.listen(_cancelTodo);
  }

  Future<Null> _getTodos() async {
    await _todoRepository.getAll().then((list) {
      _todos = list;
    });
  }

  void _doneTodo(Todo todo) {
    todo.complete = true;
    _update(todo);
  }

  void _cancelTodo(Todo todo) async {
    todo.complete = false;
    _update(todo);
  }

  void _update(Todo todo) async {
    await _todoRepository.save(todo);
    _getTodos();
  }

}

Answer 1

这是因为您在调用getTodos() 后没有“刷新”您的列表，这是修改：

HomeBloc(this._todoRepository) {
    _getTodos() //Remove the adding part it's done in the function

    _doneTodoSubject.listen(_doneTodo);

    _cancelTodoSubject.listen(_cancelTodo);
  }

  Future<Null> _getTodos() async {
    await _todoRepository.getAll().then((list) {
      _todos = list;
      _getTodosSubject.add(list); //You can actually remove the buffer _todos object 
    });
  }

正如我在评论中提到的，您可以删除 _todos 缓冲区，但我不想折射太多您的代码。

通过这几个调整，它应该可以工作。 希望对你有帮助！！