【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, //显示图片的下标
    ));
  }
相关推荐
天空之城--1 小时前
Android Flutter行业最新动态与实用参考(2026年8月第2周)
android·flutter
恋猫de小郭1 小时前
Flutter 3.47 发布,快来看看有什么更新吧
android·前端·flutter
大龄秃头程序员16 小时前
一次 Flutter 动画 Demo 的整理与复盘
flutter
AlexMaybeBot19 小时前
躺在沙发上开发 Openclaw 的移动端APP
前端·flutter
天空之城--20 小时前
Android Flutter行业动态与学习参考(2026年8月)
android·flutter
FungLeo21 小时前
Flutter Web token 存储陷阱:crypto.subtle 在非安全上下文失效排查实录
前端·安全·flutter
FungLeo21 小时前
Flutter Web 中文字体困境与渲染器选择:CanvasKit vs HTML renderer 实战
前端·flutter·html
杉氧1 天前
原生交互:如何在 Flutter 中嵌入 Android/iOS 原生组件并解决手势冲突
android·flutter·dart
恋猫de小郭1 天前
Flutter iOS Deep Link 为什么会突然失效:一系列难以言喻的问题
android·前端·flutter
FungLeo2 天前
Flutter fl_chart 0.70 破坏性 API 迁移实录:duration/getTooltipColor/withValues 全解
flutter·fl_chart