图像小部件未在setState上重建

Question

我正在尝试在我的flutter应用程序中实现搜索。它有点像一个电子商务应用程序，里面有每种产品的图片和名称。搜索应该使用输入的查询从列表中筛选出产品。好吧，它工作得很好，但只有文本小部件得到重建。图像移动的不仅仅是文本；更像是说图像小部件即使在有状态的小部件中也不会重建。我观察到GetImg()小部件是我为获取图像而构建的自定义小部件，实际上只有在需要构建新的东西时才会调用。例如，如果我的屏幕上已经有10个匹配项，并且我在搜索输入中键入了更多的字符，则会显示较少的匹配结果，但GetImg()小部件不会重建，这使得已经构建的图像即使在应该重建和更改时也会保持在其位置。GetImg()小部件只有在我退格并显示更多匹配时才会构建。请注意，它实际上并没有构建已经存在的图像，而是构建了新的图像。我只是希望我的问题能被理解。

这是我的搜索功能：

List filterProducts(String text, List items) {
List searchedList = items
.where((item) =>
item.title
.toString()
.toLowerCase()
.contains(text.trim().toLowerCase()) ||
item.price
.toString()
.toLowerCase()
.contains(text.trim().toLowerCase()))
.toList();
return searchedList;
}

这就是我循环它们的方式：

Widget build(BuildContext context) {
return GestureDetector(
onTap: () {},
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
),
child: Hero(
tag: widget.product.id,
child: ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: GetImage(widget.product.images[0]), // GetImage is the widget class I fetch images with; and it does not rebuild
),
),
),
),
Text(
formatPrice(widget.product.price),
style: TextStyle(fontWeight: FontWeight.bold),
) // the Text widget rebuilds adequately
],
),
);
}

GetImage文件(如有必要(:

class GetImage extends StatefulWidget {
final String productName;
GetImage(this.productName);
@override
_GetImageState createState() => _GetImageState();
}
class _GetImageState extends State<GetImage> {
StorageReference photoRef =
FirebaseStorage.instance.ref().child('productImages');
Uint8List imageFile;
getImage() {
if (!requestedIndexes.contains(widget.productName)) {
int maxSize = 1 * 1024 * 1024;
photoRef.child(widget.productName).getData(maxSize).then((data) {
if (mounted) {
setState(() {
imageFile = data;
});
}
imageData.putIfAbsent(widget.productName, () {
return data;
});
}).catchError((error) {
debugPrint(error.toString());
});
requestedIndexes.add(widget.productName);
}
}
Image displayImage() {
dynamic size = MediaQuery.of(context).size;
if (imageFile == null) {
return Image.asset(
'assets/icons/loader.gif',
height: size.height,
width: size.width * 0.5,
fit: BoxFit.cover,
);
} else {
return Image.memory(
imageFile,
height: size.height,
width: size.width * 0.5,
fit: BoxFit.cover,
);
}
}
@override
void initState() {
super.initState();
if (!imageData.containsKey(widget.productName)) {
getImage();
} else {
if (mounted) {
setState(() {
imageFile = imageData[widget.productName];
});
}
}
}
@override
Image build(BuildContext context) {
return displayImage();
}
}

Answer 1

您在initState中调用getImage，它不会更新图像，因为它没有在构建中调用。当您更新产品名称时，构建函数不会引用更新后的产品名称。这就是原因。如果可能，请在构建中调用getImage函数。