Flutter Stack 变化深度

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,
));