你能以编程方式将 Draggable 放在 DragTarget 中吗？

Question

这听起来很奇怪！但我有两个拖动目标和两个可拖动对象。我希望他们在每个目标中开始一个。然后，当一个目标拖放到第二个目标上时，第二个目标的可拖动对象需要跳转到第一个目标。

我想这个问题可以归结为您是否可以通过编程方式将可拖动对象放入目标中。这看起来可行，还是 DragTarget 不合适？

一些示例代码 - 我无法在拖动目标中启动可拖动对象

import 'package:flutter/material.dart';

MyDraggable drag1 = new MyDraggable(Colors.red);
MyDraggable drag2 = new MyDraggable(Colors.green);
MyDragTarget target1 = new MyDragTarget();
MyDragTarget target2 = new MyDragTarget();

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(fontFamily: 'PressStart'),
      home: MyHomeScreen(),
    );
  }
}

class MyHomeScreen extends StatefulWidget {
  MyHomeScreen({Key key}) : super(key: key);
  createState() => MyHomeScreenState();
}

class MyHomeScreenState extends State<MyHomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.red[100],
      appBar: AppBar(
        toolbarHeight: 70.0,
        title: Center(child: Text('Swap the draggables')),
        backgroundColor: Colors.pink,
      ),
      body: Container(
        color: Colors.yellow[200],
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Center(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [target1, drag1, drag2, target2],
                // children: [target1, SizedBox(width: 100), target2],
              ),
            ),
            Text('Q1: Can the Draggables be started in the DragTargets?'),
            Text('Q2: If you drag from one target to the other, '
                'can the second swap to the other target?'),
          ],
        ),
      ),
    );
  } // End build()
} // End class MyHomeScreenState

class MyDragTarget extends StatelessWidget {
  bool dragAccepted = false;
  Color acceptedColor;
  @override
  Widget build(BuildContext context) {
    return Stack(children: [
      Container(color: Colors.blue,height: 90.0,width: 90.0,
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: DragTarget<Color>(
            builder: (context, List<Color> acceptedData, rejectedData) {
              if (dragAccepted) {
                return MyDraggable(acceptedColor);
              } else {
                return Container(color: Colors.grey,height: 50,width: 50,);
              }
            },
            onWillAccept: (aColor) {
              acceptedColor = aColor;
              return true;
            },
            onMove: (moveData) {},
            onAccept: (aColor) { dragAccepted = true; },
            onLeave: (data) {},
          ),
        ),
      ),
    ]);
  } // Build
} // End Class MyDragTarget

class MyDraggable extends StatefulWidget {
  MyDraggable(this.color);
  final Color color;

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

class _MyDraggableState extends State<MyDraggable> {
  @override
  Widget build(BuildContext context) {
    return Draggable(
      data: widget.color,
      child: Container(color: widget.color, height: 50, width: 50),
      feedback: Container(color: widget.color, height: 50, width: 50),
      childWhenDragging:
          Container(color: Colors.pink[100], height: 50, width: 50),
      onDragStarted: () {},
      onDragEnd: (dragDetails) {
        setState(() {});
      },
      onDragCompleted: () {},
      onDraggableCanceled: (velocity, offset) {},
    );
  }
}

Answer 1

对于来自 Flutter SDK 的默认 Draggable，没有提供任何方法允许我们修改 UI 上显示的 Draggable 的偏移/位置（所有这些信息都存储在 DraggableDetails 的 @987654324 中@)。

话虽如此，您可以尝试以下 2 个选项：

• 创建一个自定义 Draggable 类，允许以编程方式操纵其在 UI 上的位置
• 根据DragTarget类的onWillAccept回调改变Draggable子部件的属性（本例中每个Container的color）