当可拖动的对象位于ListView内时，拖放偏移错误。

Question

我正在制作一个新的应用程序，我需要在一个带有可拖动元素的ListView中放置一个或多个拖放区，不需要拖放目标。

我试着通过手动在垂直位置上减去100px来 "纠正 "偏移位置，但这肯定不是很理想。

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Drag and drop bug"),
        ),
        body: App(),
      ),
    );
  }
}

class App extends StatefulWidget {
  @override
  AppState createState() => AppState();
}

class AppState extends State<App> {
  Color caughtColor = Colors.grey;

  Container spacer({double height: 400, Color color: Colors.blue}) {
    return Container(
      color: color,
      height: height,
    );
  }

  @override
  Widget build(BuildContext context) {
  // I need a ListView because I have other elements before and after the stack that will certainly occupy more than the view height, the spacers simulate these elements
    return ListView(
      children: <Widget>[
        spacer(color: Colors.amber),
        Container(
          height: 400,
          child: 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),
            ],
          ),
        ),
        spacer(color: Colors.cyan)
      ],
    );
  }
}

class DragBox extends StatefulWidget {
  final Offset initPos;
  final String label;
  final Color itemColor;

  DragBox(this.initPos, this.label, this.itemColor);

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

class DragBoxState extends State<DragBox> {
  Offset position = Offset(0.0, 0.0);

  @override
  void initState() {
    super.initState();
    position = widget.initPos;
  }

  @override
  Widget build(BuildContext context) {
    return Positioned(
      left: position.dx,
      top: position.dy,
      child: Draggable(
        data: widget.itemColor,
        child: Container(
          width: 100.0,
          height: 100.0,
          color: widget.itemColor,
          child: Center(
            child: Text(
              widget.label,
              style: TextStyle(
                color: Colors.white,
                decoration: TextDecoration.none,
                fontSize: 20.0,
              ),
            ),
          ),
        ),
        onDraggableCanceled: (velocity, offset) {
          setState(() {
            position = offset;
          });
        },
        feedback: Container(
          width: 120.0,
          height: 120.0,
          color: widget.itemColor.withOpacity(0.5),
          child: Center(
            child: Text(
              widget.label,
              style: TextStyle(
                color: Colors.white,
                decoration: TextDecoration.none,
                fontSize: 18.0,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

预期的结果是被丢弃的元素在cursorpointer下，但它在垂直轴上移动了大约100px。

Answer 1

偏移差异是由于AppBar的高度。

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

这里的偏移是在全局坐标系中给出的，其中原点在屏幕的顶部和最左边。

这里给出了解决这个问题的方法。如何在Flutter中使用拖放移动元素到父容器内的任何地方？