如何使用可拖动对象在 Flutter/Dart 中移动图像

Question

我正在尝试创建一个简单的儿童游戏，允许用户单击图像并将其拖动到 DragTarget。这些图像最终将包含列表中的动态文本，但它们目前只包含一个数字来模拟它。目前，当我在图像上选择时，只有文本会移动。图像本身保持静止。我最终想要的是图像在传送到 DragTarget 后从屏幕上消失。我尝试了以下代码的一些变体，但没有任何效果。我假设我将不得不使用某种形式的 GestureDetector 但我未能成功实现一个（我的代码没有显示这些尝试）。非常感谢任何帮助或建议！

 @override
  Widget build(BuildContext context) {
    return new Scaffold(
        body: new Stack(
      children: <Widget>[
        new Container(
          decoration: new BoxDecoration(
            image: new DecorationImage(
              image: new AssetImage("assets/images/landscape_with_tree.png"),
              fit: BoxFit.cover,
            ),
          ),
        ),
        DragBox(Offset(250.0, 50.0), '1'),
        DragBox(Offset(350.0, 50.0), '2'),
        DragBox(Offset(200.0, 100.0), '3'),
        Positioned(
          right: 50.0,
          bottom: 0.0,
          child: DragTarget(
//            onAccept: () {
//            },
            builder: (
              BuildContext context,
              List<dynamic> accepted,
              List<dynamic> rejected,
            ) {
              return Container(
                width: 100.0,
                height: 100.0,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage("assets/images/basket.png"),
                  ),
                ),
                child: Center(
                  child: Text(
                    'Drag Here!',
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),

  }

可拖动类

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

  @override
  Widget build(BuildContext context) {
    return Positioned(
      left: position.dx,
      top: position.dy,
      child: Draggable(
        child: Container(
          width: 50.0,
          height: 50.0,
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage("assets/images/apple.png"),
            ),
          ),
          child: Center(
            child: Text(
              widget.label,
              style: TextStyle(
                color: Colors.white,
                decoration: TextDecoration.none,
                fontSize: 20.0,
              ),
            ),
          ),
        ),
        onDraggableCanceled: (velocity, offset) {
          setState(() {
            position = widget.initPos;
          });
        },
        feedback: Container(
          width: 60.0,
          height: 60.0,
          child: Center(
            child: Text(
              widget.label,
              style: TextStyle(
                color: Colors.white,
                decoration: TextDecoration.none,
                fontSize: 18.0,
              ),

Answer 1

我不确定这是否是最有效或最好的方法，但我得到了以下解决方案。如果您有更好的方法，请告诉我！

class _DragBoxState extends State<DragBox> {
  Offset position = Offset(0.0, 0.0);
  AssetImage apple;
  AssetImage _imageToShow = new AssetImage('assets/images/apple.png');

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

  @override
  Widget build(BuildContext context) {
    return Positioned(
      left: position.dx,
      top: position.dy,
      child: Draggable<AssetImage>(
        data: apple,
        child: Container(
          width: 50.0,
          height: 50.0,
          decoration: BoxDecoration(
            image: DecorationImage(
              image: _imageToShow,
            ),
          ),
          child: Center(
            child: Text(
              widget.label,
              style: TextStyle(
                color: Colors.black,
                decoration: TextDecoration.none,
                fontSize: 18.0,
              ),
            ),
          ),
        ),
        onDraggableCanceled: (velocity, offset) {
          setState(() {
            position = widget.initPos;
          });
        },
        onDragStarted: () {
          setState(() {
            print('drag started');
            _imageToShow = new AssetImage('assets/images/answered_apple.png');
            return _imageToShow;
          });
        },
        feedback: Container(
          width: 60.0,
          height: 60.0,
          decoration: BoxDecoration(
            image: DecorationImage(
              image: _imageToShow,
            ),
          ),
          child: Center(
            child: Text(
              widget.label,
              style: TextStyle(
                color: Colors.black,
                decoration: TextDecoration.none,
                fontSize: 16.0,
              ),
            ),
          ),
        ),
      ),
    );
  }
}