时间戳

首页 > 解决方案 > 在加载高分辨率图像时显示加载小部件

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

问题描述

我有一个照片库，里面有高分辨率的照片。我正在使用网格列出所有照片。而且，网络图像并非如此。

我想要的是在未显示照片时，我想在加载图像时显示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,
    ),
  );
}

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

标签： imageflutterdart

解决方案

根据我的经验，总是使用 GridView.builder，当需要显示大量项目时效率更高。其次，始终使用缩略图进行列表，否则您的列表会很慢甚至最后崩溃。仅详细显示图片的原始尺寸。

推荐阅读