我使用FutureBuilder将相册缩略图加载到ListTile中,如下所示:

  ListTile _albumTile(Album album, BuildContext context) {
    return ListTile(
      leading: FutureBuilder<Uint8List>(
          future: AndroidContentResolver.instance.loadThumbnail(
            uri: album.thumbnailUri,
            width: 56,
            height: 56,
          ),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return Image.memory(snapshot.data!);
            } else {
              return const FittedBox(
                  fit: BoxFit.contain, child: Icon(Icons.album, size: 56));
            }
          }),
      title: Text(album.album),
      subtitle: Text(album.artist),
    );
  }

但是,随着图像加载,占位符图标将替换为空白图像,然后替换为最终缩略图.空白图像的宽度错误,导致ListTile个标题和副标题四处 skip ,导致闪烁.

以下屏幕截图序列显示了三个连续的帧:

  1. 图像占位符.
  2. 一些期货交易已经完成,并且正在显示缩略图.其他瓷砖有一个空白图像(文本跳到左侧).
  3. 所有的future 都已经完成.

enter image description here

即使我修正了文本的 skip ——通过为图像指定fit: BoxFit.contain, width: 56, height: 56——在缩略图出现之前,我仍然会看到一道白色的闪光.

我做错了什么?

推荐答案

我用frameBuilder解决了这个问题.documentation人说:

如果为空,该小部件将在第一个图像帧可用时显示绘制的图像(如果异步可用,则会显示为"弹出").

这正是我所看到的.

接下来是:

调用方可以使用此生成器向图像添加效果(例如,当图像可用时淡入),或在加载图像时显示占位符小部件.

...所附示例显示了如何实现淡入效果.然而,为了简单起见,我 Select 了以下选项:

    return Image.memory(
      snapshot.data!,
      frameBuilder: (context, child, frame, wsl) {
        if (frame != null) {
          return child;
        } else {
          return _albumThumbnailPlaceholder();
        }
      },
  Widget _albumThumbnailPlaceholder() {
    return FittedBox(fit: BoxFit.contain, child: Icon(Icons.album, size: 56));
  }

这似乎完全摆脱了空白框架.

Flutter相关问答推荐

为什么当我升级时我的项目没有运行

使用Flutter 提供程序包加载状态应用程序时,在自定义按钮中显示CircularProgressIndicator

使用ThemeProvider不在亮模式和暗模式之间切换

如何在Flutter 中不从getX库中初始化GetxController中的变量

Android Studio中的Ffltter&;Couchbase:进程C:/Program Files/Git/bin/bash以非零退出值35结束

查询满足AND条件的文档的FiRestore

将侧边菜单和底部导航栏放在同一Flutter 应用程序中

使用现有Map方法对子类克隆方法的逻辑进行Dart标准化

StateNotifer正在riverpod中提供初始状态值(bool)

Flutter类调用另一个类中的另一个方法失败

如何更改Flutter 中文本的混合模式?

如何使用providerContainer监听/写入FutureProvider?

使用Flutter项目设置Firebase遇到困难?这些解决方案或许能帮到你!

如何更改 DropDownMenu 的显示方向?

Flutter可滚动定位列表支持rtl方向吗?

如何从底部导航栏打开 bottomModal 表?

为什么将 bloc 提供程序放在单独的文件/类中会引发错误?

如何修复int类型不是String类型的子类型

如何在手势检测器中获得涟漪效应

如何在 flutter 中制作这种类型的扩展瓦片