Question

我正在努力了解为什么将可拖动的小部件移动后，它为什么被放置在比我放置它的位置低100px的另一位置...我唯一能想到的是它添加了Appbar和status bar的高度...

我以为我做错了事，所以我决定创建一个我能做的最简单的例子，它仍然在做同样的事情。

仅需确认一下，我不想使用拖动目标或类似的东西……我只是想将可拖动小部件准确地放置在放置物品的位置。但是，我确实需要在堆栈内部

[EDIT]看来，删除AppBar可使Draggable精确地放置在您放置它的位置。但是，我不希望可拖动窗口小部件放在状态栏后面，因此在添加SafeArea之后，我也遇到了类似的问题。 [/ EDIT]

import 'package:flutter/material.dart';

class DraggableTest extends StatefulWidget {
  static const routeName = '/draggable-test';
  @override
  _DraggableTestState createState() => _DraggableTestState();
}

class _DraggableTestState extends State<DraggableTest> {
  Offset _dragOffset = Offset(0, 0);

  Widget _dragWidget() {
    return Positioned(
      left: _dragOffset.dx,
      top: _dragOffset.dy,
      child: Draggable(
        child: Container(
          height: 120,
          width: 90,
          color: Colors.black,
        ),
        childWhenDragging: Container(
          height: 120,
          width: 90,
          color: Colors.grey,
        ),
        feedback: Container(
          height: 120,
          width: 90,
          color: Colors.red,
        ),
        onDragEnd: (drag) {
          setState(() {
            _dragOffset = drag.offset;
          });
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Stack(
        children: <Widget>[
          _dragWidget(),
        ],
      ),
    );
  }
}

Answer 1

主要问题与全局位置与局部位置有关：您的Draggable小部件提供全局位置，而堆栈内部的Positioned则具有局部位置。当没有AppBar的全局位置和本地位置匹配时，该问题就消失了，但仍然存在。

所以真正的解决方法是：

将全局坐标转换为语言环境坐标：

RenderBox renderBox = context.findRenderObject();
onDragEnd(renderBox.globalToLocal(drag.offset));

您知道需要上下文。此上下文必须是本地的（例如Draggable的上下文）。因此，在最终实现中，您可以将Stack或Draggable嵌入到StatelessWidget类中，以获取本地上下文。

这是我的最终实现方式：

import 'package:flutter/material.dart';

main() {
  runApp(MaterialApp(
    home: DraggableTest(),
  ));
}

class DraggableTest extends StatefulWidget {
  static const routeName = '/draggable-test';

  @override
  _DraggableTestState createState() => _DraggableTestState();
}

class _DraggableTestState extends State<DraggableTest> {
  Offset _dragOffset = Offset(0, 0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Stack(
        children: <Widget>[
          Positioned(
            left: _dragOffset.dx,
            top: _dragOffset.dy,
            child: DragWidget(onDragEnd: onDragEnd),
          ),
        ],
      ),
    );
  }

  void onDragEnd(Offset offset) {
    setState(() {
      _dragOffset += offset;
    });
  }
}

class DragWidget extends StatelessWidget {
  final void Function(Offset) onDragEnd;

  const DragWidget({Key key, this.onDragEnd}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Draggable(
      child: Container(
        height: 120,
        width: 90,
        color: Colors.black,
      ),
      childWhenDragging: Container(
        height: 120,
        width: 90,
        color: Colors.grey,
      ),
      feedback: Container(
        height: 120,
        width: 90,
        color: Colors.red,
      ),
      onDragEnd: (drag) {
        RenderBox renderBox = context.findRenderObject();
        onDragEnd(renderBox.globalToLocal(drag.offset));
      },
    );
  }
}

请注意，renderBox.globalToLocal(drag.offset)返回的偏移量是Draggable内部的偏移量（从开始位置到结束位置）。这就是为什么我们需要通过设置_dragOffset += offset来计算最终偏移量的原因。

为什么可拖动小部件未放置在正确的位置？

1 个答案: