我正在尝试使用DragTarget
和Draggable
来填充空白UI。我想在拖动过程中设置CCD_ 3和指针之间的偏移量,以防止CCD_,我需要在feedback
和dragtarget
之间进行命中测试我该如何实现?这就是我想要实现的。
解决方案
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',
);
}
}
这就是结果。
在这种情况下,我建议使用Transform
小部件将所选的可拖动项目放大一点,并将其用作反馈。它还将给用户一种物品已被拾取的感觉。
只需使用Transform
包装您的可拖动小部件,并使用值为~1.25
的scale
属性。(示例值(这将使小部件的大小增加25%。
但是,如果您特别需要为拾取的项目添加偏移,那么只需使用可拖动项目的padded
版本作为反馈即可。
例如,
如果你需要添加,将可拖动项移动到当前触摸位置上方一点,那么只需在可拖动项下方添加所需的填充即可。
基本上,通过在对面添加一些填充,可以在小部件中添加偏移量。
我仍然建议使用Transform
小部件方法。它感觉更真实,在所有类似的UI中都很常见。
如果你对这种方法有任何疑问,请在评论中告诉我。
一个更简单的解决方案可能是添加以下函数:
Offset myPointerDragAnchorStrategy(
Draggable<Object> draggable, BuildContext context, Offset position) {
return Offset(10, 0);
}
然后在Draggable
对象中设置dragAnchorStrategy
属性:
return Draggable<String>(
...
dragAnchorStrategy: myPointerDragAnchorStrategy,
...
);