Flutter 实现 View 的移动拖拽

最新推荐文章于 2024-05-11 01:35:16 发布

初壹十五a

最新推荐文章于 2024-05-11 01:35:16 发布

阅读量3.2k

点赞数

分类专栏： Android 移动开发程序员 Flutter 文章标签： Flutter Android

本文链接：https://blog.csdn.net/Android_SE/article/details/94452815

版权

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

摘要由CSDN通过智能技术生成

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