0

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

我想这个问题可以归结为您是否可以以编程方式将可拖动对象放入目标中。这看起来可行，还是 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) {},
    );
  }
}
4

1 回答 1

0

对于 Flutter SDK 中的默认Draggable，没有提供允许我们修改DraggableUI 上显示的偏移/位置的方法（所有这些信息都存储在DraggableDetails的 a 中Draggable）。

话虽如此，您可以尝试两种选择：

  • 创建一个自定义Draggable类，允许以编程方式操纵其在 UI 上的位置
  • 根据类的回调改变Draggablewidget的children的属性（本例中是每个Container的回调）onWillAcceptDragTargetcolor
于 2021-01-30T04:38:46.513 回答