Flutter中GestureDetector内setState不生效、选中图库图片不展示如何解决

问题原因 #

控制每个网格项图片展示状态的imageFile、check变量被声明在GridView的itemBuilder方法内部。调用setState触发页面重绘时，itemBuilder会为所有网格项重新执行构建逻辑，这两个局部变量会被重置为初始值null和false，选中图片后赋值的状态会被直接覆盖，因此无法渲染本地图片。

修复方案 #

1. 在当前页面的State类中新增成员变量，按索引存储每个网格位置选中的本地图片：

// 长度与GridView的itemCount保持一致，默认值null代表对应位置未选择本地图片
List<XFile?> selectedLocalImages = List.filled(5, null);

2. 替换_buildPhotoSection方法的实现，移除itemBuilder内部声明的局部状态变量，改用上面定义的成员变量管理状态：

Widget _buildPhotoSection() {
  return MediaQuery.removePadding(
    context: context,
    removeTop: true,
    child: GridView.builder(
      shrinkWrap: true,
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
      ),
      itemCount: 5,
      itemBuilder: (BuildContext context, int index) {
        return GestureDetector(
          onTap: () async {
            final XFile? image = await _picker.pickImage(source: ImageSource.gallery);
            if (image != null) {
              setState(() {
                // 将选中的图片存入对应索引位置
                selectedLocalImages[index] = image;
                print("DONE");
              });
            }
          },
          child: Stack(
            children: [
              Card(
                color: Colors.amber,
                child: Container(
                  padding: EdgeInsets.all(1),
                  child: selectedLocalImages[index] == null
                      ? index <= imageList.length - 1
                          ? CachedNetworkImage(
                              width: 200,
                              height: 150,
                              imageUrl: imageList[index].imageURL == ""
                                  ? "https://www.freeiconspng.com/uploads/no-image-icon-6.png"
                                  : imageList[index].imageURL,
                              placeholder: (context, url) => CircularProgressIndicator(),
                              errorWidget: (context, url, error) => Icon(Icons.error),
                              fit: BoxFit.fill,
                            )
                          : CachedNetworkImage(
                              width: 200,
                              height: 150,
                              imageUrl: "https://www.freeiconspng.com/uploads/no-image-icon-6.png",
                              placeholder: (context, url) => CircularProgressIndicator(),
                              errorWidget: (context, url, error) => Icon(Icons.error),
                              fit: BoxFit.fill,
                            )
                      : Image.file(
                          File(selectedLocalImages[index]!.path),
                          width: 200,
                          height: 150,
                          fit: BoxFit.fill,
                        ),
                ),
              ),
              Align(
                alignment: Alignment.bottomCenter,
                child: TextButton(
                  onPressed: () {},
                  child: Text('Change'),
                )
              )
            ],
          ),
        );
      }
    ),
  );
}

补充说明 #

如果需要重置对应位置的图片为默认网络图，只需将对应索引的selectedLocalImages[index]赋值为null后调用setState即可生效。

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