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

Posted 2023-02-23

【中文标题】从 Flutter 中的 List<Widget> 中删除 Index wise CustomWidget

【英文标题】：Remove Index wise CustomWidget from List<Widget> in Flutter

【发布时间】：2019-06-16 01:28:59

【问题描述】：

我最初在 Column 中有空的 Widget 列表。现在在其他小部件上单击我在 _contactItems 中添加新的自定义小部件

   Column(
      children: _contactItems,
    )

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



 _contactItems.add(newCustomWidget(value));

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

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

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

也尝试过

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

【问题讨论】：

有什么问题？

它总是删除最后一个小部件。索引没有问题。 removeAt 可能有问题

为 Column 中的每个孩子提供 UniqueKey。

我尝试使用 key: Key("index_$index")，并与 _contactItems.removeWhere((item) return item.key == _contactItems[index].key; );

【参考方案1】：

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

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

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

【讨论】：

哇 :D 太棒了！我不知道为什么我们需要这样比较 Key

我也遇到了同样的问题，你是怎么给列中的项目一个唯一键的？

【参考方案2】：

如果您想操作 ListView 或 GridView，请务必为 List/GridView 的每个子 Widget 分配一个 Key

简而言之，Flutter 仅按类型而不是状态来比较小部件。因此，当 List/GridView 中表示的 List 的状态发生更改时，Flutter 不知道应该删除哪些子项，因为它们的 Types 仍然相同并签出。 Flutter 发现的唯一问题是项目的数量，这就是为什么它只删除 List/GridView 中的最后一个小部件。

因此，如果您想在 Flutter 中操作列表，请为每个子组件的***小部件分配一个 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') 
            ),

    );
  ),

);