美文网首页Flutter
Flutter 网络/本地图片 手势操作放大处理

Flutter 网络/本地图片 手势操作放大处理

作者: 技术混子 | 来源:发表于2020-08-21 16:44 被阅读0次

    需要配置插件:
    photo_view: ^0.9.2

    代码片段:

    import 'package:flutter/material.dart';
    import 'package:photo_view/photo_view.dart';
    
    class PhotoViewSimpleScreen extends StatelessWidget {
     const PhotoViewSimpleScreen({
    this.imageProvider, //图片
    this.loadingChild, //加载时的widget
    this.backgroundDecoration, //背景修饰
    this.minScale, //最大缩放倍数
    this.maxScale, //最小缩放倍数
    this.heroTag, //hero动画tagid
     });
     final ImageProvider imageProvider;
     final Widget loadingChild;
     final Decoration backgroundDecoration;
     final dynamic minScale;
    final dynamic maxScale;
    final String heroTag;
    
    @override
    Widget build(BuildContext context) {
    return Scaffold(
        body: InkWell(
      onTap: () {
        Navigator.of(context).pop();
      },
      child: Container(
        constraints: BoxConstraints.expand(
          height: MediaQuery.of(context).size.height,
        ),
        child: Stack(
          children: <Widget>[
            Positioned(
              top: 0,
              left: 0,
              bottom: 0,
              right: 0,
              child: PhotoView(
                imageProvider: imageProvider,
                loadingChild: loadingChild,
                backgroundDecoration: backgroundDecoration,
                minScale: minScale,
                maxScale: maxScale,
                heroAttributes: PhotoViewHeroAttributes(tag: heroTag),
                enableRotation: true,
              ),
            ),
            Positioned(
              //右上角关闭按钮
              right: 10,
              top: MediaQuery.of(context).padding.top,
              child: IconButton(
                icon: Icon(
                  Icons.close,
                  size: 30,
                  color: Colors.white,
                ),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              ),
            )
          ],
        ),
      ),
    ));
    }
    }
    

    复制上述代码,项目中调用即可

    相关文章

      网友评论

        本文标题:Flutter 网络/本地图片 手势操作放大处理

        本文链接:https://www.haomeiwen.com/subject/rutpjktx.html