如何为GridView中的每个网格组件设置Key？

方法一：构建Widget时动态生成Key（推荐） #

不用把Key塞进原数组，直接在生成网格组件的时候，基于元素的唯一标识（比如业务id，没有的话用索引，优先选业务id）创建Key就行，完全不改动原数组结构：

GridView.builder(
  itemCount: yourList.length,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
  itemBuilder: (context, index) {
    // 优先用元素的唯一id，避免数组增删后索引变化导致Key失效
    final itemKey = ValueKey(yourList[index].id ?? index);
    return YourGridItemWidget(
      key: itemKey,
      data: yourList[index],
    );
  },
)

这种方式的好处是Key和元素直接绑定，后续数组做增删改操作时，只要元素的唯一标识不变，Flutter就能正确识别组件的状态，不会乱掉。

方法二：用包装类关联Key和数据 #

如果一定要把Key和数据绑定在一起管理，可以定义一个简单的包装类，把原数据和Key封装起来，不用修改原数组的元素类型：

// 定义一个通用的包装类
class ItemWithKey<T> {
  final Key key;
  final T data;

  ItemWithKey(this.key, this.data);
}

// 把原数组转换成带Key的包装数组
final itemsWithKeys = yourList.map((item) {
  return ItemWithKey(ValueKey(item.id ?? UniqueKey()), item);
}).toList();

// 构建GridView时直接取包装类里的Key和数据
GridView.builder(
  itemCount: itemsWithKeys.length,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
  itemBuilder: (context, index) {
    final wrappedItem = itemsWithKeys[index];
    return YourGridItemWidget(
      key: wrappedItem.key,
      data: wrappedItem.data,
    );
  },
)

方法三：临时用UniqueKey（仅静态网格场景） #

如果元素没有任何唯一标识，临时可以用UniqueKey()，但注意：每次组件重建时都会生成新的Key，会导致组件状态丢失，只适合不会动态变化的静态网格：

GridView.count(
  crossAxisCount: 2,
  children: yourList.map((item) {
    return YourGridItemWidget(
      key: UniqueKey(),
      data: item,
    );
  }).toList(),
)

内容的提问来源于stack exchange，提问作者lukre