Flutter中Gridview.builder调用setState后界面未更新问题求助

问题根因 #

出现该问题90%的概率是你把suggestionList定义在了build方法内部，而非State类的成员变量位置。每次setState触发组件重绘时，build方法会重新执行，列表就会被初始化回最初的Tomato版本，所以界面看起来没有更新。
剩余小概率场景是未给GridView子项设置唯一key，只要调整列表定义位置基本就能解决问题。

正确实现步骤 #

1. 将suggestionList定义为State类的成员变量，放在build方法外部即可：

class YourWidgetState extends State<YourWidget> {
  // 列表作为类成员变量，不要放在build方法里
  List suggestionList = [
    {'name':'Tomato','imageurl':'https://ayb.akinoncdn.com/products/2021/06/18/7025/46ead09c-f4cb-4b85-acd7-8ca1d8452864_size780x780_quality60_cropCenter.jpg'}
  ];

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      shrinkWrap: true,
      itemCount: suggestionList.length,
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
      ),
      itemBuilder: (context,index){
        Map data = suggestionList[index];
        return GestureDetector(
          onTap: (){
            setState(() {
              // 直接赋值新列表即可，无需提前clear
              suggestionList = [
                {'name':'Eggplant','imageurl':'https://ayb.akinoncdn.com/products/2021/06/18/7025/46ead09c-f4cb-4b85-acd7-8ca1d8452864_size780x780_quality60_cropCenter.jpg'}
              ];
            });
          },
          child:Container(
            alignment: Alignment.topLeft,
            padding: const EdgeInsets.all(8),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(25),
              boxShadow: [
                BoxShadow(
                  color: Colors.black.withOpacity(0.05),
                  blurRadius: 2.0,
                  spreadRadius: 1.0,
                  offset: const Offset(0, 1.0),
                )
              ],
            ),
            child: Column(
              children: [
                Expanded(
                  flex: 10,
                  child: Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(25),
                      image: DecorationImage(
                        image: NetworkImage(data['imageurl']),
                        fit: BoxFit.scaleDown
                      )
                    ),
                  ),
                ),
                Expanded(
                  flex:1,
                  child: Text(
                    data['name'],
                    style: const TextStyle(fontWeight: FontWeight.w600),
                  ),
                ),
              ],
            ),
          )
        );
      }
    );
  }
}

内容的提问来源于stack exchange，提问作者Mehmet Emre Sever