android - ListView 项目的 Flutter Provider 模式

Question

我正在尝试构建一个 ListView，其中使用提供者/消费者模式提供每个项目的状态。可以使用按钮添加项目并通过点击它们来删除它们。

我有两个状态类：

• ListState保存一个字符串列表（那些字符串将显示在列表中）
• ListItem保存每个项目的状态。

这种方法效果很好，并且 ListView 包含预期的项目。但是，如果项目被删除并添加，则 ListState 的列表包含正确的项目。在 ListView 中显示了一个奇怪的状态：

这是我的小部件，其中包含 Scaffold 和 ListView：

class ListExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      builder: (BuildContext context) => ListState(), // <-- build state for the list
      child: Scaffold(
        appBar: AppBar(
          title: Text('Provider in list example'),
          actions: <Widget>[
            Consumer(
              builder: (BuildContext context, ListState state, Widget child) {
                return IconButton(
                  icon: Icon(Icons.add),
                  onPressed: () {
                    state.addItem();
                  },
                );
              },
            )
          ],
        ),
        body: Consumer(
          builder: (BuildContext context, ListState state, Widget child) {
            return ListView.builder(
              itemBuilder: (BuildContext context, int index) => ChangeNotifierProvider(
                builder: (BuildContext context) => ListItem(state.list[index]),
                child: ListItemWidget(),
              ),
              itemCount: state.list.length,
            );
          },
        ),
      ),
    );
  }
}

ListItemWidget 使用项目本身的状态和列表的状态。在 onTap 事件中，当前项目从列表中移除：

class ListItemWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer(builder: (BuildContext context, ListState listState, Widget child) {
      return Consumer(builder: (BuildContext context, ListItem itemStaet, Widget child) {
        return ListTile(
          title: Text(itemStaet.value),
          onTap: () {
            listState.removeItem(itemStaet.value);
          },
        );
      });
    });
  }
}

两个状态类在这里：

class ListState with ChangeNotifier {
  static int counter = 0;

  List<String> list;

  ListState() {
    list = new List<String>();

    addItem();
    addItem();
  }

  void addItem() {
    list.add("List item $counter");
    counter++;

    notifyListeners();
  }

  void removeItem(String item) {
    list.remove(item);
    notifyListeners();
  }
}

class ListItem with ChangeNotifier {
  final String value;

  ListItem(this.value);
}

节点：同样的效果发生在 GridView 上