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作为父容器监听手势。

@overrideWidget build(BuildContext context) {    return GestureDetector(        onHorizontalDragUpdate: dragEvent,        onVerticalDragUpdate: dragEvent,        child: xxx    );}void dragEvent(DragUpdateDetails details) {    final RenderObject box = context.findRenderObject();    //  取得自己设置Widget的大小，用来计算Widget的中心锚点    dx = details.globalPosition.dx - mykey.currentContext.size.width / 2;    dy = details.globalPosition.dy - mykey.currentContext.size.height / 2;    setState(() {});  }

GestureDetector类是Flutter中解决手势的Widget，它包括了我们常用到的手势事件回调，例如：
onTap、onTapDown、onTapUp、onTapCancel、onDoubleTap、onLongPress等一系列手势。
我们通过该类的这些回调方法可以直接获取手势坐标以便解决。
比方我们例子中就要用到onHorizontalDragUpdate和onVerticalDragUpdate这两个回调来解决Widget的拖动。

第四步

使用Transform.translate方法来移动Widget，通常我们会使用margin或者者padding来移动Widget，刚开始我也是这么做的，但是随之而来的就是各种坑，比方明明固定了子Widget的大小，但是随着padding或者margin的改变Widget的大小也随之改变了。而API提供的Transform.translate方法正是用来移动Widget的。

另外或者许你还会遇到一个坑，那就是不论怎样给Container容器设置高和宽都不生效。起因就是使用MaterialApp作为基础容器之后，系统默认会让Container撑满，无论怎样设置高和宽都没有效果，必需用Align Widget包一层才可以。

也许你会思考在Flutter中如何像Android的findViewById一样找到一个Widget的实例。你需要在Widget初始化的时候创立一个GlobalKey，就像这样：final mykey = new GlobalKey<MyDragState>();而后在new Widget的时候设置进key，就像下面代码一样。

@override  Widget build(BuildContext context) {    return GestureDetector(      onHorizontalDragUpdate: dragEvent,      onVerticalDragUpdate: dragEvent,      child: Container(        color: Colors.red,        child: Transform.translate(          offset: Offset(dx, dy),          child: Align(            alignment: Alignment.topLeft,            child: Container(              width: 150.0,              height: 100.0,              alignment: Alignment.center,              key: mykey,              color: Colors.yellow,              child: Text("Drag Box"),            ),),),),);  }

至此，就实现了Flutter拖动Widget。下一篇专栏会详情Flutter中的动画，并接着本次拖拽的例子实现松手后的动画特效