lutter堆栈变化深度
问题内容:
我有一个带有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);
});
}
不仅改变深度,还交换位置
问题答案:
向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,
));