Question

我试图建立一个ListView，其中使用提供者/消费者模式提供每个项目的状态。可以使用按钮添加项目，也可以通过点击将其删除。

我有两个状态类：

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

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

这是我的小部件，其中包含脚手架和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上发生相同的效果

ListView项目的Flutter Provider模式

0 个答案: