Stack父级的相对位置

时间:2018-06-17 20:41:29

标签: dart flutter

我正在尝试使用Stack构建一个拖放式拖放界面。

当整个身体都是一个堆叠时,我就这样工作了。

Widget build(BuildContext context) {
  return Stack(children: <Widget>[
      DragBox(Offset(0.0, 0.0), 'Box One', Colors.blueAccent),
      DragBox(Offset(200.0, 0.0), 'Box Two', Colors.orange),
      DragBox(Offset(300.0, 0.0), 'Box Three', Colors.lightGreen),

  ]);
)

DragBox中的drop方法就像这样

  onDraggableCanceled: (velocity, offset) {
    setState(() {
      position = offset;
    });
  },

但是当我有一个脚手架而且堆栈只是身体时,坐标不能正常工作。

Widget build(BuildContext context) {
  return new Scaffold(
    appBar: _buildAppBar(),
    body: Stack(
      children: <Widget>[
        DragBox(Offset(0.0, 0.0), 'Box One', Colors.blueAccent),
        DragBox(Offset(200.0, 0.0), 'Box Two', Colors.orange),
        DragBox(Offset(300.0, 0.0), 'Box Three', Colors.lightGreen),
      ],
    ),
    bottomNavigationBar: _buildBottomNavbar(),
  );
)

正如你在img中看到的那样,由于我认为这个吧,它有一个错误。

drag_drop 我也尝试过这种drop方法,但我认为它不会使用堆栈将坐标转换为local。

onDraggableCanceled: (velocity, offset) {
  setState(() {
          RenderBox rb = context.findRenderObject();
          Offset off2 = rb.globalToLocal(offset);
          position = off2;
        });
      },

由于

1 个答案:

答案 0 :(得分:0)

最后,我在孩子中使用GestureDetector并相对于手势开始位置移动来解决它,如下所示:

Positioned(
    left: 0.0,
    top: 0.0,
    child: GestureDetector(
        onScaleStart: (details) {
          //Store start conditions
          _startPos = details.focalPoint;
        },
        onScaleUpdate: (scaleDetails) {
          setState(() {
            position += scaleDetails.focalPoint - _startPos;
            _startPos = scaleDetails.focalPoint;
          });
        },
        ....