Flutter进阶实战 18-20 可拖拽Draggable控件实例

前言：

Flutter提供了强大的拖拽控件，可以灵活定制，并且非常简单。这里就学习一下Flutter拖拽控件，并根据学到的知识作一个拖拽案例。

实现效果：

知识点：

一、Draggable Widget

Draggable控件负责就是拖拽，父层使用了Draggable，它的子元素就是可以拖动的，子元素可以实容器，可以是图片。用起来非常的灵活。

参数说明：

• data: 是要传递的参数，在DragTarget里，会接受到这个参数。当然要在拖拽控件推拽到DragTarget的时候。
• child:在这里放置你要推拽的元素，可以是容器，也可以是图片和文字。
• feedback: 常用于设置推拽元素时的样子，在案例中当推拽的时候，我们把它的颜色透明度变成了50%。当然你还可以改变它的大小。
• onDraggableCanceled:是当松开时的相应事件，经常用来改变推拽时到达的位置，改变时用setState来进行。

代码:

Draggable(
  data:widget.widgetColor,
  child: Container(
    width: 100,
    height: 100,
    color:widget.widgetColor,
  ),
  feedback:Container(
    width: 100.0,
    height: 100.0,
    color: widget.widgetColor.withOpacity(0.5),
  ),
  onDraggableCanceled: (Velocity velocity, Offset offset){
    setState(() {
      this.offset = offset;
    });
  },

二、DragTarget Widget

DragTarget是用来接收拖拽事件的控件，当把Draggable放到DragTarget里时，他会接收Draggable传递过来的值，然后用生成器改变组件状态。

• onAccept:当推拽到控件里时触发，经常在这里得到传递过来的值。
• builder: 构造器，里边进行修改child值。

DragTarget(onAccept: (Color color) {
  _draggableColor = color;
}, builder: (context, candidateData, rejectedData) {
  return Container(
    width: 200.0,
    height: 200.0,
    color: _draggableColor,
  );
}),

实现代码：

 main.dart 文件：

import 'package:flutter/material.dart';
import 'draggable_demo.dart';
void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: DraggableDemo(),
    );
  }
}

 draggable_demo.dart 文件：

import 'package:flutter/material.dart';
import 'draggable_widget.dart';

class DraggableDemo extends StatefulWidget {
  _DraggableDemoState createState() => _DraggableDemoState();
}

class _DraggableDemoState extends State<DraggableDemo> {
  Color _draggableColor=Colors.grey;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //这里使用层叠组件stack
       body: Stack(
         children: <Widget>[
           //左上的容器
           DraggableWidget( 
             offset: Offset(80.0, 80.0),
             widgetColor: Colors.tealAccent,
           ),
           //右上容器
           DraggableWidget(
             offset: Offset(180.0, 80.0),
             widgetColor: Colors.redAccent,
           ),
           //拖拽后放入的容器
           Center(
             child: DragTarget(onAccept: (Color color){
               _draggableColor=color;
             },
             builder: (context,candidateData,rejectedData){
               return Container(
                 width: 200.0,
                 height: 200.0,
                 color: _draggableColor,
               );
             },
             ),
           )
         ],
       ),
    );
  }
}

draggable_widget.dart 文件：

import 'package:flutter/material.dart';

class DraggableWidget extends StatefulWidget {
  final Offset offset;  //布局位置变量
  final Color widgetColor;//布局颜色变量
  //构造方法，用于数据传递
  const DraggableWidget({Key key,this.offset,this.widgetColor}) : super(key: key);
  _DraggableWidgetState createState() => _DraggableWidgetState();
}

class _DraggableWidgetState extends State<DraggableWidget> {
  Offset offset=Offset(0.0,0.0); //初始化offset位置
  @override
  void initState() {
    super.initState();
    offset=widget.offset;
  }
  @override
  Widget build(BuildContext context) {
    //这里使用Positioned控件定位布局
    return Positioned(
       left: offset.dx,  //接收x轴位置
       top: offset.dy,  //接收y轴位置
       //这里使用容器可拖拽控件Draggable
       child: Draggable(
          data: widget.widgetColor,  
          child: Container(
            width: 100.0,
            height: 100.0,
            color: widget.widgetColor,
          ),
          feedback: Container(
            width: 100.0,
            height: 100.0,
            color: widget.widgetColor.withOpacity(0.5),
          ),
          onDraggableCanceled: (Velocity velocity,Offset offset){
            setState(() {
                this.offset=offset;//更新位置 
            });
          },
       ),
    );
  }
}