Flutter 实现 View 的移动拖拽

最新推荐文章于 2025-01-19 22:36:04 发布

原创

最新推荐文章于 2025-01-19 22:36:04 发布 · 3.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter #Android

本文介绍了在Flutter中实现View拖拽的步骤，包括使用MaterialApp和Scaffold构建框架，自定义MyDragWidget，利用GestureDetector监听手势，通过Transform.translate移动Widget，并解决了使用margin或padding导致的问题。此外，还提到了在Flutter中寻找Widget实例的方法，为后续的动画特效做准备。

您好，欢迎关注我的，本文章是关于 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;
    }
}

第三步