Question

我正在开发一个Flutter应用程序。我想要缩放图像，并且想要捏一下。它工作正常，但是当我用手指指着变焦时。我需要的是在手指不想清除时要使用捏来拖动和缩放。我正在使用“ cached_network_image”加载图像。为了缩放，我使用来自“ pinch_zoom_image”插件的自定义库。

源代码为https://github.com/YoussefKababe/pinch_zoom_image/blob/master/lib/src/pinch_zoom_image.dart

在这段代码中，我尝试实现'_handleScaleEnd（）'函数。但是我没有解决我的问题。

我的代码如下所示。

pubspec.yaml

cached_network_image：^ 0.8.0 pinch_zoom_image：^ 0.2.5

main.dart

import 'package:flutter/material.dart';
import 'pinch_zoom_image_custom.dart';
import 'package:cached_network_image/cached_network_image.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
    return new MaterialApp(
    title: 'Pinch Zoom Image',
    theme: new ThemeData(
        primarySwatch: Colors.blue,
    ),
    home: Scaffold(
        appBar: AppBar(
        title: Text('Pinch Zoom Image'),
        ),
        body: ListView(
        children: <Widget>[

            Container(
            padding: EdgeInsets.all(16.0),
            child: PinchZoomImage(
                image: CachedNetworkImage(
                imageUrl: 'https://i.imgur.com/tKg0XEb.jpg',
                ),
                zoomedBackgroundColor: Color.fromRGBO(240, 240, 240, 1.0),
                onZoomStart: () {
                print('Zoom started');
                },
                onZoomEnd: () {
                print('Zoom finished');
                },
            ),
            ),
        ],
        ),
    ),
    );
}
}

pinch_zoom_image_custom.dart

import 'package:flutter/material.dart';
import 'pinch_zoom_image_custom.dart';
import 'package:cached_network_image/cached_network_image.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
    return new MaterialApp(
    title: 'Pinch Zoom Image',
    theme: new ThemeData(
        primarySwatch: Colors.blue,
    ),
    home: Scaffold(
        appBar: AppBar(
        title: Text('Pinch Zoom Image'),
        ),
        body: ListView(
        children: <Widget>[

            Container(
            padding: EdgeInsets.all(16.0),
            child: PinchZoomImage(
                image: CachedNetworkImage(
                imageUrl: 'https://i.imgur.com/tKg0XEb.jpg',
                ),
                zoomedBackgroundColor: Color.fromRGBO(240, 240, 240, 1.0),
                onZoomStart: () {
                print('Zoom started');
                },
                onZoomEnd: () {
                print('Zoom finished');
                },
            ),
            ),
        ],
        ),
    ),
    );
}
}

Answer 1

我通过使用'matrix_gesture_detector package'而不是'pinch_zoom_image'解决了问题。

我从下面的链接中得到了答案。这是我的期望。 https://github.com/pskink/matrix_gesture_detector/blob/master/example/lib/transform_demo3.dart

在这段代码中，我尝试使用矩阵手势库进行捏和缩放。它将检测手势检测。

我的代码如下所示。

    import 'package:flutter/material.dart';
    import 'package:cached_network_image/cached_network_image.dart';
    import 'package:matrix_gesture_detector/matrix_gesture_detector.dart';


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

    class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return new MaterialApp(
        title: 'Pinch Zoom Image',
        theme: new ThemeData(
            primarySwatch: Colors.blue,
        ),
        home: Scaffold(
            appBar: AppBar(
            title: Text('Pinch Zoom Image'),
            ),
            body:TransformDemo3()

        ),
        );
    }
    }

    class TransformDemo3 extends StatefulWidget {
    @override
    _TransformDemo3State createState() => _TransformDemo3State();
    }

    class _TransformDemo3State extends State<TransformDemo3> {



    Matrix4 matrix = Matrix4.identity();
    ValueNotifier<int> notifier = ValueNotifier(0);


    @override
    Widget build(BuildContext context) {
        return Scaffold(
        body: LayoutBuilder(
            builder: (ctx, constraints) {
            Size s = constraints.biggest;
            double side = s.shortestSide * 0.666;
            matrix.leftTranslate((s.width - side) / 2, (s.height - side) / 2);
            return MatrixGestureDetector(
                onMatrixUpdate: (m, tm, sm, rm) {
                matrix = MatrixGestureDetector.compose(matrix, tm, sm, null);

                notifier.value++;
                },
                child: Container(
                width: double.infinity,
                height: double.infinity,
                alignment: Alignment.topLeft,
                color: Color(0xff444444),
                child: AnimatedBuilder(
                    animation: notifier,
                    builder: (ctx, child) {
                    return Transform(
                        transform: matrix,
                        child: Container(
                        width: side,
                        height: side,
                        child: CachedNetworkImage(
                            imageUrl: 'https://i.imgur.com/tKg0XEb.jpg',
                        ),
                        ),
                    );
                    },
                ),
                ),
            );
            },
        ),
        );
    }
    }

手指拿起时可放大捏缩

1 个答案: