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
Есть идеи? :)
