Question

Flutter：我在堆栈中有两个图像，每个图像都可以通过拖动来缩放。这两个图像彼此之间位于一个下方，因此一开始它们都在屏幕上完全可见。当我拖动顶部或底部图像时，任一个都应该变大并与其他图片重叠。因此，堆栈中的顺序必须根据我平移的图像而改变。

我做了差不多的工作，但有问题，我只是不明白。最初，我的主要图像是“主”图像。因此，我可以缩放它，它确实位于底部图像的顶部。现在，当我在底部图像上平移并尝试缩放它时，它会这样做，但是只需要几个毫秒，在顶部图像接收到我的onPanUpdates之前。当我抬起我的手指，并尝试再次缩放底部的图片，它像一个风情万种。所以，我需要两次尝试底部图像成为“主”图像重叠的顶部图像之前。

在下面的代码中，我简化了问题。我们只使用顶部的绿色方块和底部的红色方块。现在，当您尝试缩放底部的红色方块时，直接发生了问题：它确实获得了第一个onPanDown，但是一旦将其拖动，顶部的绿色方块就会突然收到onPanUpdate事件。它必须与我的重新排序有关：如果我不使用“ _master”变量，则它将按预期工作，除了底部红色方块始终位于顶部绿色方块之后。

import 'package:flutter/material.dart';
import 'styles.dart';
import 'package:faver/bottomNavbar.dart';

class Newsfeed extends StatefulWidget {
    @override
    _NewsfeedState createState() => _NewsfeedState();
}

class _NewsfeedState extends State<Newsfeed> {
    double _initialY;
    double _scalePic1 = 1;
    double _scalePic2 = 1;
    int _master = 1;

    List<Widget> squares;

    List<Widget> getSquares(master) {

        squares = <Widget>[];
        squares.add(Positioned(

        top: 100,
        child: Container(
            height: 200 * _scalePic1,
            width: 200,
            child: GestureDetector(
                onPanDown: (DragDownDetails details) {

                    print("===========top green square pan down");
                    _initialY = details.globalPosition.dy;
                    _master = 1;

                },
                onPanUpdate:(DragUpdateDetails details) {
                    double distanceY = details.globalPosition.dy - _initialY;
                    print("!!!panUpdate top green square");
                    setState(() {
                        _scalePic1 = 1 + distanceY / 200;
                    });
                },
                onPanEnd: (DragEndDetails details){
                    print("ended top green square");
                },
                child: Container(width: 200, height: 200 * _scalePic1, color: Colors.green)),
        )));

        squares.add(Positioned(
            bottom: 100,
            child: Container(
                height: 200 * _scalePic2,
                width: 200,
                child: GestureDetector(
                        onPanStart: (DragStartDetails details) {
                        print("=============bottom red square pan down");
                        _initialY = details.globalPosition.dy;
                        _master = 2;
                    },
                    onPanUpdate: (DragUpdateDetails details) {
                        print("######panUpdate bottom red square");
                        double distanceY = -details.globalPosition.dy + _initialY;
                        setState(() {
                            _scalePic2 = 1 + distanceY / 200;
                        });
                    },
                    onPanEnd: (DragEndDetails details){
                        print("ended bottom red square");
                    },
                    child: Container(width: 200, height: 200 * _scalePic2, color: Colors.red)),
            )));


        if (master == 1) {
            print("master = green");
            return [squares[1], squares[0]];
        } else {
            print("master = red");
            return [squares[0], squares[1]];
        }
    }

    @override
    Widget build(BuildContext context) {
        return Container(
            height: 350, child: Stack(children: getSquares(_master)));
    }
}

因此，预期的结果：当我抓取并拖动图像时，它应该缩放并与其他图像重叠。

实际结果：我需要在图像上进行两次抓斗。初次尝试时，其他图像会显示onPanUpdates

有什么主意吗？：）

Flutter：在GestureDetectors中堆叠了两个图像：重新排序问题

0 个答案: