在 Flutter 中从 List<Widget> 中删除 Index wise CustomWidget

Question

我最初在列中有一个空的小部件列表。现在在其他小部件上单击我正在 _contactItems

中添加新的自定义小部件

   Column(
      children: _contactItems,
    )

 List<Widget> _contactItems = new List<CustomWidget>();



 _contactItems.add(newCustomWidget(value));

现在假设我有 6 条记录（列中有 6 个自定义小部件）。我正在尝试删除索引记录（示例。我先删除第 3 条记录，然后删除第 1 条记录。列小部件（动态小部件）应更新为 _contactItems 在 setState() 中更新）

现在在 CustomWidget 上单击我正在从列中删除特定的 CustomWidget。

setState(() {
          _contactItems.removeAt(index);
        });

也试过

_contactItems.removeWhere((item) {
            return item.key == _contactItems[index].key;
          });

Answer 1

试试这个（假设您的 Column 小部件键具有这种格式）：

setState(() {
  this._contactItems.removeWhere((contact) => contact.key == Key("index_$index"));
});

如果这不能解决您的问题，我们可能需要更多信息。

Answer 2

如果您想操作 ListView 或 GridView，请务必为 List/GridView

的每个 child 小部件分配一个 Key

简而言之，Flutter 仅通过类型而不是状态来比较小部件。因此，当 List/GridView 中表示的 List 的状态发生变化时，Flutter 不知道应该删除哪个 children，因为它们的类型仍然相同并会检查。 Flutter 拾取的唯一问题是项目的数量，这就是为什么它只删除 List/GridView.

中的最后一个小部件的原因

因此，如果要在 Flutter 中操作列表，请为每个 child 的顶级 widget 分配一个 Key。 this article.

中提供了更详细的解释

这可以通过添加

来实现

   return GridView.count(
  shrinkWrap: true,
  crossAxisCount: 2,
  crossAxisSpacing: 5.0,
  mainAxisSpacing: 5.0,
  children: List.generate(urls.length, (index) {
    //generating tiles with from list
    return   GestureDetector(
        key: UniqueKey(), //This made all the difference for me
        onTap: () => {
          setState(() {
            currentUrls.removeAt(index); // deletes the item from the gridView
          }) 

        },
        child: FadeInImage( // A custom widget I made to display an Image from 
            image:  NetworkImage(urls[index]),
            placeholder: AssetImage('assets/error_loading.png') 
            ),

    );
  }),

);

在 Flutter 中从 List<Widget> 中删除 Index wise CustomWidget

Remove Index wise CustomWidget from List<Widget> in Flutter

dart

flutter

flutter-sliver

dart-2