在颤动中拖动没有拖动目标的项目答案

【问题标题】：Drag items without drag target in flutter在颤动中拖动没有拖动目标的项目
【发布时间】：2021-02-13 10:02:18
【问题描述】：

我有一个小部件列表。

  List<Widget> list = <Widget>[];

我在单击按钮时更新列表并在其中添加小部件。

  void addWidgets() => setState(() => list.add(Draggable(
        child: Text("data"),
        feedback: Material(child: Text("data")),
        childWhenDragging: Container(),
      )));

我希望能够将屏幕上的项目拖动到用户拖动它们的任何位置，而不是在特定位置。有点像 Instagram 故事创作者。

在此代码中，小部件是可拖动的，但当用户停止拖动时会跳回原来的位置。

【问题讨论】：

您是否尝试过在作为拖动目标的堆栈底部制作一个大部件？

标签： flutter

【解决方案1】：

您可以在不使用默认可拖动类的情况下制作可拖动的小部件。我用matrix_gesture_detector 包做了一个。

下面的代码不仅可以让您拖动小部件。您还可以像 Instagram 故事一样，用两根手指捏合缩放来调整它们的大小。

您可以根据您的用例自定义list。这是完整的代码。

import "package:flutter/material.dart";
import 'package:flutter/rendering.dart';
import 'package:matrix_gesture_detector/matrix_gesture_detector.dart';

class TextOverImage extends StatefulWidget {
  @override
  _TextOverImageState createState() => _TextOverImageState();
}

class _TextOverImageState extends State<TextOverImage> {
  List<Widget> list = [
    DraggableWidget(
        draggableWidget:
            Container(color: Colors.green, height: 100, width: 100)),
    DraggableWidget(
        draggableWidget: Container(color: Colors.red, height: 70, width: 70)),
    DraggableWidget(
        draggableWidget: Container(color: Colors.black, height: 20, width: 20)),
  ];

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Column(
          children: [
            Center(
              child: Container(
                height: 400,
                width: 400,
                color: Colors.blue,
                child: Stack(
                  children: list,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class DraggableWidget extends StatefulWidget {
  final Widget draggableWidget;
  DraggableWidget({Key key, this.draggableWidget}) : super(key: key); // changed

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

class _DraggableWidgetState extends State<DraggableWidget> {
  double scale = 0.0;

  @override
  Widget build(BuildContext context) {
    final ValueNotifier<Matrix4> notifier = ValueNotifier(Matrix4.identity());

    return Center(
      child: MatrixGestureDetector(
        onMatrixUpdate: (m, tm, sm, rm) {
          notifier.value = m;
        },
        child: AnimatedBuilder(
          animation: notifier,
          builder: (ctx, child) {
            return Transform(
              transform: notifier.value,
              child: Center(
                child: Stack(
                  children: <Widget>[
                    Transform.scale(
                      scale:
                          1, 
                      origin: Offset(0.0, 0.0),
                      child: widget.draggableWidget,
                    ),
                  ],
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

希望这对你有所帮助，朋友。和平。

【讨论】：