美文网首页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