美文网首页前端开发那些事儿
Flutter上线项目实战——图片视频预览

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

作者: callme大帅 | 来源:发表于2021-06-01 10:17 被阅读0次

    interactiveviewer_gallery

    [图片上传失败...(image-75ae6b-1622445894310)]

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

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

    预览

    qiniu/youtube

    apk download

    安装

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

    interactiveviewer_gallery: ${last_version}
    

    如何使用

    1. 九宫格图片页面中图片组件包裹Hero(用来跳转的承接动画)
    Hero(
        tag: source.url,
        child: ${gridview item}
    )
    
    1. 点击九宫格图片跳转到图片预览页面
    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");
              },
          ),
        ),
      );
    
    1. 定义自己的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和讨论

    相关文章

      网友评论

        本文标题:Flutter上线项目实战——图片视频预览

        本文链接:https://www.haomeiwen.com/subject/yhzqsltx.html