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

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

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,
       this.galleryItems,
      this.assetItems,
      this.index,
      this.controller})
      : super(key: key) {
    controller = PageController(initialPage: index);
  }

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

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

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

  
  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, //显示图片的下标
    ));
  }
  • 8
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要将Flutter中的图片保存到本地并分享到QQ,你可以按照以下步骤操作: 1. 将图片保存到本地存储,可以使用以下代码: ```dart import 'dart:io'; import 'package:flutter/material.dart'; import 'package:path_provider/path_provider.dart'; import 'package:image_gallery_saver/image_gallery_saver.dart'; Future<void> saveImageToGallery(BuildContext context, String imageUrl) async { try { // 获取应用程序目录 Directory appDocDir = await getApplicationDocumentsDirectory(); // 获取文件名 String fileName = imageUrl.substring(imageUrl.lastIndexOf("/") + 1); // 组合路径 String filePath = "${appDocDir.path}/$fileName"; // 下载图片 HttpClient httpClient = HttpClient(); HttpClientRequest request = await httpClient.getUrl(Uri.parse(imageUrl)); HttpClientResponse response = await request.close(); Uint8List bytes = await consolidateHttpClientResponseBytes(response); // 保存图片到本地 File file = File(filePath); await file.writeAsBytes(bytes); // 保存图片到相册 await ImageGallerySaver.saveImage(bytes); ScaffoldMessenger.of(context).showSnackBar(SnackBar( content: Text("图片保存到相册"), )); } catch (e) { ScaffoldMessenger.of(context).showSnackBar(SnackBar( content: Text("保存图片失败: $e"), )); } } ``` 2. 调用QQ分享功能,可以使用以下代码: ```dart import 'package:flutter/material.dart'; import 'package:flutter_qq_share/flutter_qq_share.dart'; Future<void> shareImageToQQ(BuildContext context, String imageUrl) async { try { // 获取应用程序目录 Directory appDocDir = await getApplicationDocumentsDirectory(); // 获取文件名 String fileName = imageUrl.substring(imageUrl.lastIndexOf("/") + 1); // 组合路径 String filePath = "${appDocDir.path}/$fileName"; // 下载图片 HttpClient httpClient = HttpClient(); HttpClientRequest request = await httpClient.getUrl(Uri.parse(imageUrl)); HttpClientResponse response = await request.close(); Uint8List bytes = await consolidateHttpClientResponseBytes(response); // 保存图片到本地 File file = File(filePath); await file.writeAsBytes(bytes); // 分享图片到QQ await FlutterQQShare.shareImageToQQ(filePath); } catch (e) { ScaffoldMessenger.of(context).showSnackBar(SnackBar( content: Text("分享图片失败: $e"), )); } } ``` 调用 `saveImageToGallery` 函数可以将图片保存到本地保存到相册,调用 `shareImageToQQ` 函数可以将图片分享到QQ。你可以根据自己的需求修改和调整这些代码。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值