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

最新推荐文章于 2024-11-18 23:16:51 发布

小蜜蜂嗡嗡

最新推荐文章于 2024-11-18 23:16:51 发布

阅读量1k

点赞数 8

CC 4.0 BY-SA版权

文章标签： flutter

本文链接：https://blog.youkuaiyun.com/androidhyf/article/details/136294459

文章描述了一个使用Flutter构建的PhotoShowAllWidget，它展示了图片库或网络图片的大图浏览功能，支持缩放、拖拽和本地保存，同时集成权限检查和保存图片操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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()
          ],
        ),
      ),
    );
  }
}

调用

  // 查看图片大图
  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, //显示图片的下标
    ));
  }