Flutter上线项目实战——图片视频预览

最新推荐文章于 2025-03-10 20:00:00 发布

callme大帅

最新推荐文章于 2025-03-10 20:00:00 发布

阅读量1.4k

点赞数

分类专栏： Flutter 文章标签： flutter dart

本文链接：https://blog.youkuaiyun.com/u014377146/article/details/117256141

版权

Flutter 专栏收录该内容

12 篇文章

订阅专栏

interactiveviewer_gallery

图片预览&视频预览&图片视频混合预览的容器UI

支持双指缩放
支持双击放大
支持左右切换图片
支持下拉手势返回, 伴随缩小、移动、透明度变化
支持视频失去焦点自动暂停

预览

qiniu/youtube

apk download

安装

因为该库是在InteractiveViewer基础上实现的, 所以flutter版本不低于1.20.0

interactiveviewer_gallery: ${last_version}

如何使用

九宫格图片页面中图片组件包裹Hero(用来跳转的承接动画)

Hero(
    tag: source.url,
    child: ${gridview item}
)

点击九宫格图片跳转到图片预览页面

Navigator.of(context).push(
    HeroDialogRoute<void>(
      builder: (BuildContext context) => InteractiveviewerGallery<DemoSourceEntity>(
          sources: sourceList,
          initIndex: sourceList.indexOf(source),
          // 定义自己的item
          itemBuilder: itemBuilder,
          onPageChanged: (int pageIndex) {
            print("nell-pageIndex:$pageIndex");
          },
      ),
    ),
  );

定义自己的item (因为每个人的UI设计不一样, 所以这里需要自己实现item, 该库只是一个UI容器), 可以参考预览视频中的实现: example/lib/main.dart

Widget itemBuilder(BuildContext context, int index, bool isFocus) {
  DemoSourceEntity sourceEntity = sourceList[index];
  if (sourceEntity.type == 'video') {
    return DemoVideoItem(
      sourceEntity,
      isFocus: isFocus,
    );
  } else {
    return DemoImageItem(sourceEntity);
  }
}

其他

欢迎pr和讨论