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

预期的结果是将放置的元素放在光标/指针下方，但将其在垂直轴上移动约100px。

Answer 1

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

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

此处的偏移量是在全局坐标系中给出的，其中原点位于屏幕的顶部和最左侧。

此处提供了解决方案：How to move element anywhere inside parent container with drag and drop in Flutter?

当Draggable在ListView中时，拖放偏移量错误

1 个答案: