flutter InteractiveViewe 双击放大或缩小头像图片/Widget

final _transformationController = TransformationController(); //用于头像缩放
TapDownDetails? _doubleTapDetails ; //用于缩放图片是获取触摸位置

双击图片如果图片未放大那么放大 否则缩小到为放大状态

1. InteractiveViewer(
   
2.                                     maxScale: 4,
   
3. 
   
4.                                     //panEnabled: true,
   
5.                                     // scaleEnabled: true,
   
6. 
   
7.                                     transformationController: _transformationController,
   
8. 
   
9.                                     child: GestureDetector(
   
10.                                       onDoubleTapDown: (TapDownDetails details){
    
11.                                         _doubleTapDetails = details; //获取触摸位置
    
12.                                       },
    
13.                                       onTap: (){
    
14. 
    
15. 
    
16.                                         print(Matrix4.identity());
    
17.                                       },
    
18. 
    
19.                                       onDoubleTap:(){
    
20.                                         print("双击");
    
21.                                         print(_transformationController.value.getMaxScaleOnAxis());//输出当前缩放倍数
    
22.                                         if (_transformationController.value != Matrix4.identity()) {
    
23.                                           //如果已经放大 缩小到1倍
    
24.                                           _transformationController.value = Matrix4.identity();
    
25.                                         } else {
    
26.                                           //放大图片 3倍
    
27.                                           final position = _doubleTapDetails!.localPosition;
    
28.                                           // For a 3x zoom
    
29.                                           _transformationController.value = Matrix4.identity()
    
30.                                             ..translate(-position.dx * 2, -position.dy * 2)
    
31.                                             ..scale(3.0);//放大倍数
    
32.                                         }
    
33.                                       },
    
34. 
    
35. 
    
36. 
    
37.                                       child: Image.network(
    
38.                                         imLogic.userInfo.value.faceURL!, // 替换为你的图片地址
    
39.                                         fit: BoxFit.fitWidth,
    
40.                                       ),
    
41.                                     ),

复制代码

藏宝库28xin.com