Flutter: setState()在gestredetector内部不起作用

Question

在我的代码中，我正在将网络图像加载到网格中。然后，我允许用户通过从他们自己的图库中选择一个来替换网络图像。请检查以下代码

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) {
XFile? imageFile;
bool check = false;
return GestureDetector(
onTap: () async {
final XFile? image =
await _picker.pickImage(source: ImageSource.gallery);
setState(() {
imageFile = image;
check = true;
print("DONE");
});
},
child: Stack(
children: [
Card(
color: Colors.amber,
child: Container(
padding: EdgeInsets.all(1),
child: check == false
? 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(imageFile!.path),
width: 200,
height: 150,
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: TextButton(
onPressed: () {},
child: Text(
'Change',
)))
],
),
);
}),
);
}

在这里我可以选择图像，但是图库中的图像永远不会显示。看起来setState正在工作，即使它被称为。

为什么会发生这种情况，我如何解决这个问题?

Answer 1

变量XFile? imageFile;在_buildPhotoSection函数中定义-而不是在小部件本身中定义。所以你实际上是在更新setState()调用中的局部变量。一旦setState()完成-它将通知Flutter引擎重建小部件-并且您的imageFile变量将被重新初始化-不保留您在前一次迭代中设置的值。

我认为你应该把XFile? imageFile;和bool check = false;移到类级别，这样就可以了。

编辑:在你评论了多张图片之后——这是我的建议:

var imageFile=<int, XFile>{};
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) {
//             XFile? imageFile;
//bool check = false;
return GestureDetector(
onTap: () async {
final XFile? image =
await _picker.pickImage(source: ImageSource.gallery);
setState(() {
imageFile[index] = image;
//check = true;
print("DONE");
});
},
child: Stack(
children: [
Card(
color: Colors.amber,
child: Container(
padding: EdgeInsets.all(1),
child: imageFile.containsKey(index) == false
? 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(imageFile[index]!.path),
width: 200,
height: 150,
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: TextButton(
onPressed: () {},
child: Text(
'Change',
)))
],
),
);
}),
);
}

您将注意到我将imageFile转换为一个映射—它将保存用户选择的索引和XFile。我还删除了检查变量-我正在检查地图是否包含索引键，并基于该图像应该渲染。

我没有尝试编译这个，所以里面可能很少有错误。