image - 在加载高分辨率图像时显示加载窗口小部件

Question

我有一个包含高分辨率照片的照相馆。我正在使用网格列出所有照片。而且，网络镜像并非如此。
我想要的是未显示照片时的图像，我想在加载图像而不是空白框时显示spin_widget。
主类:

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: MyAppbar(
      centerLogo: true,
    ),
    body: GridView.count(
      crossAxisCount: 2,
      mainAxisSpacing: 8,
      crossAxisSpacing: 8,
      padding: EdgeInsets.all(8),
      childAspectRatio: 1,
      children: mapIndexed(
        galleryItems,
        (index, item) => PhotoItem(
          photoItem: item,
          onTap: () {
            open(context, index);
          },
        ),
      ).toList(),
    ),
  );
}

每个照片项目。类名称: PhotoItem

@override
Widget build(BuildContext context) {
  return Material(
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)),
    clipBehavior: Clip.antiAlias,
    child: Hero(
      child: GestureDetector(
        onTap: onTap,
        child: Image.asset(
          photoItem.assetName,
          fit: BoxFit.cover,
        ),
      ),
      tag: photoItem.assetName,
    ),
  );
}

我可以使用缓存高度通过降低图像质量来快速显示图像。但是，在这种情况下，我想在小盒子上加载整个图像。我知道它会杀死手机。

Answer 1

根据我的经验，请始终使用GridView.builder，以便在需要显示许多项目时提高效率。第二，始终使用缩略图进行列表，否则列表将非常缓慢甚至崩溃。仅详细显示图片的原始尺寸。