flutter - 在flutter中使用 `Draggable`时如何设置反馈和指针之间的偏移量？

Question

我正在尝试使用 DragTarget 和 Draggable 制作填空 UI。 我想在拖动过程中设置 feedback 和指针之间的偏移量，以防止 feedback 被手指隐藏， 我需要在 feedback 和 dragtarget 之间进行 HitTest 我该如何实现？ This is what I want to implement.

解决方案

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  String _text = '';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Expanded(
            child: Center(
              child: _buildDragTarget(),
            ),
          ),
          Expanded(
            child: Center(
              child: _buildDraggable(),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildDragTarget() {
    return DragTarget<String>(onAccept: (data) {
      setState(() {
        _text = data;
      });
    }, builder: (BuildContext context, List candidateData, List rejectedData) {
      return Container(
        width: 150,
        height: 50,
        decoration: BoxDecoration(
          border: Border.all(width: 3, color: Colors.blue),
        ),
        child: Center(
          child: Text(
            _text,
            style: TextStyle(fontSize: 24),
          ),
        ),
      );
    });
  }

  Widget _buildDraggable() {
    var draggable = Chip(
      label: Text(
        'draggable',
        style: TextStyle(fontSize: 24),
      ),
    );

    var feedback = Transform.scale(
      scale: 2.0,
      child: Opacity(
        opacity: 0.5,
        child: Container(
          padding: EdgeInsets.only(bottom: 100),
          child: Material(
              color: Colors.transparent,
              child: Transform.scale(
                scale: 0.5,
                child: draggable,
              )),
        ),
      ),
    );

    return Draggable<String>(
      dragAnchor: DragAnchor.child,
      child: draggable,
      feedback: feedback,
      feedbackOffset: Offset(0, -50),
      data: 'draggable',
    );
  }
}

This is the result.

Answer 1

在这种情况下，我建议使用 Transform 小部件将选定的可拖动项目放大一点并将其用作反馈。它还会给用户一种元素已被拾起的感觉。

只需使用 Transform 包装您的可拖动小部件，并使用值为 ~1.25 的 scale 属性。 (示例值)这将使小部件的大小增加 25%。

但是，如果您特别需要为选取的项目添加偏移量，则只需使用可拖动项目的 padded 版本作为反馈。

例如，

如果您需要将可拖动项移动到当前触摸位置上方一点，则只需在可拖动项下方添加所需的填充即可。

基本上，通过在对面添加一些填充，它会给你一个在小部件中添加偏移的效果。

我仍然建议采用 Transform 小部件方法。它感觉更真实，并且在所有类似的 UI 中都很常见。

如果您对此方法有任何疑问，请在评论中告诉我。