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

Question

我正在使用 BloC 架构模式开发 'todo' flutter 应用程序。

我的 'Home' ui 显示待办事项列表，用户可以单击项目的按钮将状态从 "todo" 更改为 "complete"。

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

但是当我点击 "complete" 按钮时，列表视图没有更新。

下面是我的 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:

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() 后没有 "refresh" 您的列表，这里是修改：

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 缓冲区，但我不想折射太多代码。

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

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

Flutter: My list view is not updated when I modify an item

dart

flutter

bloc