Флаттер: стек с двумя изображениями в GestureDetectors: проблема с переупорядочением - PullRequest
Новая
       36

Флаттер: стек с двумя изображениями в GestureDetectors: проблема с переупорядочением

0 голосов
/ 02 февраля 2019

Flutter: у меня есть два изображения в стеке, каждое из которых можно масштабировать, перетаскивая его.Два изображения располагаются одно под другим, поэтому сначала они полностью видны на экране.Когда я перетаскиваю верхнее или нижнее изображение, оно должно увеличиваться и перекрывать другое изображение.Поэтому порядок в моем стеке должен меняться в зависимости от того, какое изображение я переместил.

Я сделал так, что это почти сработало, но есть проблема, которую я просто не понимаю.Изначально мое главное изображение - это «главное» изображение.Таким образом, я могу масштабировать его, и он находится сверху нижнего изображения.Теперь, когда я делаю panDown на нижнем изображении и пытаюсь масштабировать его, он делает это, но только на пару миллисекунд, прежде чем верхнее изображение получит мои 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

Есть идеи?:)

...