flutter实现可缩放可拖拽双击放大的图片功能


### flutter_drag_scale
```
可缩放可拖拽的功能,可实现图片或者其他widget的缩放已经拖拽
并支持双击放大的功能
```

我们知道官方提供了双击缩放,但是不支持拖拽的功能,我们要实现向百度地图那样可以缩放又可以拖拽的功能,官方的方法就不支持了。
下面先演示下功能:

缩放拖拽

参数只有两个:
1、child ,是一个widget,可以是图片或者任意的widget
2、doubleTapStillScale,默认是true,意思是双击一直放大,还是只放大一次,再次双击缩小到原图片的大小,如果为false,第一次双击放大图片2倍,再次双击回位。

用法很简单:
1、导入依赖库
```
dependencies:
  flutter:
    sdk: flutter
  flutter_drag_scale:
    git: https://github.com/LiuC520/flutter_drag_scale.git
```
2、引入库:
```
import 'package:flutter_drag_scale/flutter_drag_scale.dart';
```
3、如下的用法:
```
import 'package:flutter/material.dart';
import 'package:flutter_drag_scale/flutter_drag_scale.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 400.0,
      width: 400,
      child: Center(
        child: DragScaleContainer(
          doubleTapStillScale: true,
          child: new Image(
            image: new NetworkImage(
                'http://h.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=0d023672312ac65c67506e77cec29e27/9f2f070828381f30dea167bbad014c086e06f06c.jpg'),
          ),
        ),
      ),
    );
  }
}

```
wechat :674668211 加微信进flutter微信群


掘金: https://juejin.im/user/581206302f301e005c60cd2f


简书:https://www.jianshu.com/u/4a5dce56807b


csdn:https://me.csdn.net/liu__520


github : https://github.com/LiuC520/

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现图片的缓入缓出效果,你可以使用 Flutter 中的动画来实现。下面是一个简单的示例代码,演示了图片的缓入缓出效果: 首先,确保你已经在 `pubspec.yaml` 文件中添加了图片资源的引用,例如: ```yaml flutter: assets: - images/image.jpg ``` 然后,在你的 Flutter 页面中,使用 `AnimatedOpacity` 和 `Image` 组件来实现图片的缓入缓出效果: ```dart import 'package:flutter/material.dart'; class ImageFadeInOut extends StatefulWidget { @override _ImageFadeInOutState createState() => _ImageFadeInOutState(); } class _ImageFadeInOutState extends State<ImageFadeInOut> with SingleTickerProviderStateMixin { AnimationController _controller; Animation<double> _animation; bool _showImage = false; @override void initState() { super.initState(); _controller = AnimationController( duration: Duration(milliseconds: 500), vsync: this, ); _animation = Tween<double>(begin: 0.0, end: 1.0).animate(_controller); } @override void dispose() { _controller.dispose(); super.dispose(); } Future<void> _toggleImage() async { if (_showImage) { await _controller.reverse(); } else { await _controller.forward(); } setState(() { _showImage = !_showImage; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Image Fade In/Out'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ AnimatedOpacity( opacity: _showImage ? 1.0 : 0.0, duration: Duration(milliseconds: 500), child: Image.asset('images/image.jpg'), ), SizedBox(height: 16.0), ElevatedButton( onPressed: _toggleImage, child: Text(_showImage ? 'Fade Out' : 'Fade In'), ), ], ), ), ); } } ``` 在这个示例中,我们使用了 `AnimatedOpacity` 组件来控制图片的透明度,从而实现缓入缓出效果。`_toggleImage` 方法用于切换图片的显示状态,并在切换完成后更新界面。 在 `build` 方法中,我们将 `AnimatedOpacity` 组件包裹在一个居中的 `Column` 中,并添加了一个按钮用于触发图片的缓入缓出效果。 记得将图片资源的路径替换为你自己的图片路径。 通过运行这个示例,你就可以看到图片缓入缓出的效果了。点击按钮可以切换图片的显示状态,实现动态的缓入缓出效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值