Flutter上線專案實戰——圖片視訊預覽

callme大帥發表於2021-05-25
Flutter

interactiveviewer_gallery

pub package

圖片預覽&視訊預覽&圖片視訊混合預覽的容器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和討論

相關文章