颤振堆栈变化深度 [英] Flutter Stack change depth

问题描述

我有一个包含3个定位小部件的堆栈，其中GestureDetector作为孩子。我可以拖动它们，但我也想在单击后将其单击到前面。
我尝试在父窗口小部件中提出更改状态的调用，但这确实会交换受影响的窗口小部件位置。

I have a Stack with 3 Positioned widgets with a GestureDetector as a child. I'm able to drag them, but I also want to bring the clicked one to the front as soon as you click it. I've tried lifting up a call to change state in the parent widget, but that does also exchange the afected widgets position.

这里是完整的示例代码（它是脚手架中的主体。
任何帮助将不胜感激

Here is the full sample code (it's the body in a Scaffold. Any help will be appreciated

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

不仅交换深度，还交换仓位

Instead of changing only depth, positions are also exchanged

推荐答案

在窗口小部件中添加 GlobalKey （或其他键）应该可以解决此问题：

Adding a GlobalKey (or some other key) to your widgets should fix the problem:

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

这篇关于颤振堆栈变化深度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！