Flutter 实现 View 的移动拖拽

您好,欢迎关注我的专栏,本专栏是关于 Flutter 的专栏,从简单的 Flutter 介绍开始,一步步带你了解进入 Flutter 的世界。你最好有一定的移动开发经验,如果没有也不要担心,在我的专栏底部给我留言,我会尽我的能力给你解答。

上一篇专栏,是教大家如何实现Flutter的主题。本专栏介绍在Flutter中如何拖拽View,并讲解会遇到的坑。

先来看效果:

第一步

在main方法中用MaterialApp和Scaffold作为应用主框架,这里我就不详细展开说明了,这样做主要是为了显示效果更好,你可以使用你熟悉的Widget控件完成。

void main() {
    runApp(MaterialApp(
        home: Scaffold(
            body: xxx
        )
    ));
}

第二步

自定义MyDragWidget类,集成StatefulWidget类,主要是为了获取手势坐标之后调用setState()方法刷新Widget的位置。

class MyDragWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyDragState();
}

class MyDragState extends State<MyDragWidget> {
    @override
    Widget build(BuildContext context) {
        return xxx;
    }
}

第三步

使用GestureDetector作为父容器监听手势。
```
@override
Widget build(BuildContext context) {
return GestureDetector(
onHorizontalDragUpdate: dragEvent,
onVerticalDragUpdate: dragEvent,
child: xxx
);
}

top Created with Sketch.