0

我正在尝试制作可拖动文本的标签，以便我可以将它们拖动到我拥有的 2 个 DragTarget 之一（理想情况下能够在 3 个 DragTarget 之间移动它们）。不幸的是，我不能让它们与 DragTargets 交互，因为它们甚至不调用 onWillAccept()。我的可拖动对象是 DragabbleTag 并扩展了 Draggable，而我的 dragTargets 位于 Stateful Widget 中并且应该接受它们。

import 'package:myApp/components/draggableTag.dart';
import 'package:flutter/material.dart';

class DraggableTagTarget extends StatefulWidget {
  final String title;
  final int maxTagAmount;
  final Color backgroundColor;
  final List<DraggableTag> tagsPool;

  const DraggableTagTarget(
      {Key key,
      this.title,
      this.backgroundColor,
      this.tagsPool,
      this.maxTagAmount})
      : super(key: key);

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

class _DraggableTagTargetState extends State<DraggableTagTarget> {
  String test = "Test";

  @override
  Widget build(BuildContext context) {
    return DragTarget<DraggableTag>(onAccept: (DraggableTag value) {
      setState(() {
        widget.tagsPool.add(value);
        test = value.label;
      });
    }, onWillAccept: (DraggableTag data) {
      bool result =
          widget.tagsPool.length <= widget.maxTagAmount ? true : false;
      debugPrint("ONWillAccept: " + data.label + " = " + result.toString());
      return result;
    }, builder: (context, candidateData, rejectedData) {
      return Container(
        decoration: new BoxDecoration(
          color: widget.backgroundColor,
          border: Border.all(
            color: Colors.black,
          ),
        ),
        child: Column(
          children: <Widget>[
            Text(test),
            Text(widget.title),
            SizedBox(
              height: 60,
              child: Wrap(
                children: widget.tagsPool,
              ),
            ),
          ],
        ),
      );
    });
  }
}

自定义 DragTarget 'DraggableTagTarget'

import 'package:flutter/material.dart';

class DraggableTag extends Draggable<String> {
  final String label;

  DraggableTag({Key key, this.label})
      : super(
          key: key,
          data: label,
          child: idleTag(label),
          feedback: feedbackTag(label),
          childWhenDragging: ghostTag(label),
        );

  static Widget idleTag(String label) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 2.0),
      child: Text(
        label,
        style: TextStyle(
          fontSize: 16,
        ),
      ),
      decoration: BoxDecoration(
        color: Colors.blue,
        border: Border.all(
          color: Colors.black,
        ),
        borderRadius: BorderRadius.all(Radius.circular(20)),
      ),
    );
  }

自定义 Draggable 'DraggableTag' 我排除了不应该相关的 feedbackTag() 和 ghostTag

起初我的 draggableTag 正在扩展一个小部件，但看到一些类似的问题，我将其直接扩展为 Draggable 但它没有帮助

编辑：我在列表中的自定义 DialogWidget（有状态小部件）中将 ma 值分配给可拖动


class _RatingDialogState extends State<RatingDialog> {
  List<DraggableTag> tagsPool = [
    DraggableTag(label: "Acting"),
    DraggableTag(label: "Scenario"),
    DraggableTag(label: "Pace"),
    DraggableTag(label: "Length"),
    DraggableTag(label: "Message"),
  ];
  List<DraggableTag> negativeTagsPool = [];
  List<DraggableTag> positiveTagsPool = [];

  @override
  Widget build(BuildContext context) {
    return Dialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10),
      ),
      elevation: 0,
      backgroundColor: Colors.transparent,
      child: contentBox(context),
    );
  }

  contentBox(context) {
    return Stack(
  ...
             Wrap(
                children: tagsPool,
              ),
              SizedBox(height: 22),
              Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    Flexible(
                      child: FractionallySizedBox(
                        widthFactor: 0.85,
                        child: DraggableTagTarget(
                            title: "Negative",
                            backgroundColor: Colors.red,
                            tagsPool: negativeTagsPool,
                            maxTagAmount: 3),
                      ),
                    ),
                    Flexible(
                      child: FractionallySizedBox(
                        widthFactor: 0.85,
                        child: DraggableTagTarget(
                            title: "Positive",
                            backgroundColor: Colors.green,
                            tagsPool: positiveTagsPool,
                            maxTagAmount: 3),
                      ),
                    ),
                  ]),
...

解决方案：正如 ikerfah 解释的那样，我没有在 <> 中输入正确的类型，因为我对 DraggableTag 类是什么感到困惑。我创建了另一个类来包含数据标签，以便我的 DragTarget 和 DraggableTag 都使用这个类

4

1 回答 1

0

Draggable并且DragTarget必须具有相同的泛型类型，但您有Draggable<String>并且DragTarget<DraggableTag>

于 2021-02-12T23:36:11.707 回答