颤振堆栈更改深度

Question

我有一个堆栈，其中包含 3 个定位小部件，小时候有一个 GestureDetector。我可以拖动它们，但我也想在您单击它后立即将点击的那个带到前面。 我尝试在父小部件中发起更改状态的调用，但这也会交换受影响的小部件位置。

这是完整的示例代码(它是脚手架中的正文。 任何帮助将不胜感激

class DragBox extends StatefulWidget {
final Offset startPosition;
final Color color;
final String label;
final Function bringToTop;
DragBox({
this.startPosition, 
this.color: const Color.fromRGBO(255, 255, 255, 1.0),
this.label,
this.bringToTop
});
@override
DragBoxState createState() => DragBoxState();
}
class DragBoxState extends State<DragBox> {
Offset position;
Offset _startPos;
@override
void initState() {
position = widget.startPosition;
super.initState();
}
@override
Widget build(BuildContext context) {
return Positioned(
left: position.dx,
top: position.dy,
child: GestureDetector(
onScaleStart: (details) {
//Store start conditions
_startPos = details.focalPoint;
widget.bringToTop(widget);
},
onScaleUpdate: (scaleDetails) {
setState(() {
position += scaleDetails.focalPoint - _startPos;
_startPos = scaleDetails.focalPoint;
});
},
child: _buildPart()
));
}
Widget _buildPart() {
return Container(
width: 100.0,
height: 100.0,
decoration: BoxDecoration(
border: Border.all(color: Color.fromARGB(255, 0, 0, 0), width: 1.0),
color: widget.color),
child: Text(
widget.label,
style: TextStyle(
color: Color.fromRGBO(255, 255, 255, 1.0),
//decoration: TextDecoration.none,
fontSize: 15.0,
),
),
);
}
}
class WorkTable extends StatefulWidget {
@override
WorkTableState createState() => WorkTableState();
}
class WorkTableState extends State<WorkTable> {
List<DragBox> dragParts = [];
@override
void initState() {
dragParts = [];
//dragParts = [];
dragParts.add(DragBox(
startPosition: Offset(0.0, 0.0),
color: Colors.red,
label: "Box1",
bringToTop: this.bringToTop,
));
dragParts.add(DragBox(
startPosition: Offset(50.0, 50.0),
color: Colors.red,
label: "Box2",
bringToTop: this.bringToTop,
));
dragParts.add(DragBox(
startPosition: Offset(100.0, 100.0),
color: Colors.blue,
label: "Box3",
bringToTop: this.bringToTop,
));

super.initState();
}
@override
Widget build(BuildContext context) {
for(DragBox d in dragParts){
print(d.label);
}
return Stack(
children: dragParts,
);
}
void bringToTop(Widget widget) {
setState(() {
dragParts.remove(widget);
dragParts.add(widget);
});
}
}

奇怪的部分发生在这里

void bringToTop(Widget widget) {
setState(() {
dragParts.remove(widget);
dragParts.add(widget);
});
}

不仅改变深度，还交换位置

Answer 1

向小部件添加GlobalKey(或其他键(应该可以解决问题：

dragParts.add(DragBox(
key: GlobalKey(),
startPosition: Offset(0.0, 0.0),
color: Colors.red,
label: "Box1",
bringToTop: this.bringToTop,
));
dragParts.add(DragBox(
key: GlobalKey(),
startPosition: Offset(50.0, 50.0),
color: Colors.red,
label: "Box2",
bringToTop: this.bringToTop,
));
dragParts.add(DragBox(
key: GlobalKey(),
startPosition: Offset(100.0, 100.0),
color: Colors.blue,
label: "Box3",
bringToTop: this.bringToTop,
));

Answer 2

https://i.stack.imgur.com/TeeQZ.gif

我的知识专栏：https://zhuanlan.zhihu.com/p/46982762

例：

class TestBringToFrontPage extends StatefulWidget {
TestBringToFrontPage({Key key}) : super(key: key);
@override
State<TestBringToFrontPage> createState() {
return TestBringToFrontState();
}
}
class BoxData {
final double width;
final double height;
final Offset position;
final String key;
final Color color;
final TextAlign align;
BoxData(this.key, this.color,this.align, this.width, this.height, this.position);
}
class TestBringToFrontState extends State<TestBringToFrontPage> {
List<Widget> widgetArrays = [];
var boxDataArrays = [
BoxData("Flutter版的bringToFront", Colors.blueGrey,TextAlign.center, 200.0, 30.0, Offset(100.0, 200.0)),
BoxData("AAA", Colors.blue,TextAlign.left, 100.0, 100.0, Offset(100.0, 300.0)),
BoxData("BBB", Colors.orange,TextAlign.right, 100.0, 100.0, Offset(150.0, 250.0)),
];
@override
void initState() {
super.initState();
widgetArrays = [];
for (int i = 0; i < boxDataArrays.length; i++) {
var boxData = boxDataArrays[i];
widgetArrays.add(Positioned(
key: Key(boxData.key),
left: boxData.position.dx,
top: boxData.position.dy,
child: GestureDetector(
child: _buildBox(
boxData.color,
boxData.key,
boxData.align,
boxData.width,
boxData.height
),
onTap: () {
bringToFront(Key(boxData.key));
},
)));
}
}
@override
Widget build(BuildContext context) {
return Stack(
children: widgetArrays,
);
}
void bringToFront(Key key) {
setState(() {
for (var i = 0; i < widgetArrays.length; i++) {
Widget widget = widgetArrays[i];
if (key == widget.key) {
widgetArrays.remove(widget);
widgetArrays.add(widget);
break;
}
}
});
}
Widget _buildBox(
Color color, String label, TextAlign align, double width, double height) {
return Container(
width: width,
height: height,
decoration: BoxDecoration(
border: Border.all(color: Color.fromARGB(255, 0, 0, 0), width: 1.0),
color: color),
child: Text(
label,
textAlign: align,
style: TextStyle(
color: Color.fromRGBO(255, 255, 255, 1.0),
fontWeight: FontWeight.w700,
//decoration: TextDecoration.none,
fontSize: 15.0,
),
),
);
}
}