【flutter查看大图(可缩放、放大后可拖拽、保存到本地)】

查看大图(可双指缩放、拖拽、保存到本地)

dart 复制代码
import 'package:jade/utils/DialogUtils.dart';
import 'package:util/easy_loading_util.dart';
import 'package:util/image_util.dart';
import 'package:util/navigator_util.dart';
import 'package:util/permission_util.dart';
import 'package:util/screen_util.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:multi_image_picker/multi_image_picker.dart';
import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';

class PhotoShowAllWidget extends StatefulWidget {
  final List<String> galleryItems;
  final List<Asset> assetItems;
  final int index = 0;
  const PageController controller;

  PhotoShowAllWidget(
      {Key key,
      @required this.galleryItems,
      this.assetItems,
      this.index,
      this.controller})
      : super(key: key) {
    controller = PageController(initialPage: index);
  }

  @override
  State<StatefulWidget> createState() => _PhotoShowAllWidgetState();
}

class _PhotoShowAllWidgetState extends State<PhotoShowAllWidget> {
  int currentIndex = 0;

  @override
  void initState() {
    super.initState();
    currentIndex = widget.index;
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        NavigatorUtil.pop(value: true);
      },
      child: Scaffold(
        backgroundColor: Colors.black,
        body: Column(
          children: [
            Expanded(
                child: Container(
              width: getScreenWidth() / 0.5,
              height: getScreenHeight() / 0.5,
              child: PhotoViewGallery.builder(
                scrollPhysics: const BouncingScrollPhysics(),
                builder: (BuildContext context, int index) {
                  return PhotoViewGalleryPageOptions(
                    // initialScale: PhotoViewComputedScale.contained * 0.8,
                    minScale: PhotoViewComputedScale.contained * 1.0,
                    maxScale: PhotoViewComputedScale.covered * 1.0,
                    imageProvider: widget.galleryItems == null ||
                            widget.galleryItems.length == 0
                        ? AssetThumbImageProvider(widget.assetItems[index],
                            width: widget.assetItems[index].originalWidth,
                            height: widget.assetItems[index].originalHeight)
                        : CachedNetworkImageProvider(
                            widget.galleryItems[index]),
                  );
                },
                itemCount: widget.galleryItems == null ||
                        widget.galleryItems.length == 0
                    ? widget.assetItems.length
                    : widget.galleryItems.length,
                loadingBuilder: (context, event) => Center(
                  child: Container(
                    width: 20.0,
                    height: 20.0,
                    child: CircularProgressIndicator(
                      value: event == null
                          ? 0
                          : event.cumulativeBytesLoaded /
                              event.expectedTotalBytes,
                    ),
                  ),
                ),
                backgroundDecoration: null,
                pageController: widget.controller,

                /// 是否开启旋转
                enableRotation: false,
                onPageChanged: (index) {
                  setState(() {
                    currentIndex = index;
                  });
                },
              ),
            )),
            widget.galleryItems != null
                ? Container(
                    alignment: Alignment.center,
                    child: IconButton(
                      color: Colors.white,
                      onPressed: () async {
                        bool _isAuth = await PermissionUtil.isAuthStorage();
                        if(!_isAuth){
                          WidgetsBinding.instance.addPostFrameCallback((_){
                            DialogUtils().showGeneralDialogFunction(context,'用于保存图片等场景',notClose: true);
                            Future.delayed(Duration(seconds: 5),(){
                              Navigator.of(context).pop();
                            });
                          });
                        }

                        ImageUtil.saveImage(widget.galleryItems[currentIndex])
                            .then((value) {
                          if (value) {
                            esLoadingSuccess('保存成功');
                          } else {
                            esLoadingError('保存失败');
                          }
                        });
                      },
                      icon: Icon(Icons.save_alt),
                    ),
                  )
                : Container()
          ],
        ),
      ),
    );
  }
}

调用

dart 复制代码
  // 查看图片大图
  Future<void> _toViewBigPhoto(BuildContext context, List imagePic, int index) async {
    List<String> galleryItems = []; //图片url集合
    articlePic.forEach((element) {
      galleryItems.add(element.url);
    });
    NavigatorUtil.push(PhotoShowAllWidget(
      galleryItems: galleryItems,
      index: index, //显示图片的下标
    ));
  }
相关推荐
旭日猎鹰4 小时前
Flutter踩坑记录(三)-- 更改入口执行文件
flutter
旭日猎鹰4 小时前
Flutter踩坑记录(一)debug运行生成的项目,不能手动点击运行
flutter
️ 邪神4 小时前
【Android、IOS、Flutter、鸿蒙、ReactNative 】自定义View
flutter·ios·鸿蒙·reactnative·anroid
比格丽巴格丽抱16 小时前
flutter项目苹果编译运行打包上线
flutter·ios
SoaringHeart16 小时前
Flutter进阶:基于 MLKit 的 OCR 文字识别
前端·flutter
AiFlutter20 小时前
Flutter通过 Coap发送组播
flutter
嘟嘟叽2 天前
初学 flutter 环境变量配置
flutter
iFlyCai2 天前
深入理解Flutter生命周期函数之StatefulWidget(一)
flutter·生命周期·dart·statefulwidget
sunly_2 天前
Flutter:photo_view图片预览功能
android·javascript·flutter
Summer不秃2 天前
Flutter中sqflite的使用案例
flutter