Flutter 拖拽组件案例实现

前言 ：

各位同学的大家好 ，有段时间没有给大家更新文章了，最近写了一个flutter 中拖拽组件的案例实现， 分享给大家，希望能帮助到各位同学学习和工作 ，那么废话不多说我们正式开始。

准备工作：

需要安装flutter的开发环境：大家可以去看看之前的教程：
1 win系统flutter开发环境安装教程: https://www.jianshu.com/p/152447bc8718
2 mac系统flutter开发环境安装教程：https://www.jianshu.com/p/bad2c35b41e3

效果图：

QQ视频20201021133329[00_00_00--00_00_05].gif

具体实现：

import 'package:flutter/material.dart';
/***
 * 创建人：xuqing
 * 创建时间 ：2020年10月20日20:10:25
 *
 */
class DraggableWidget extends StatefulWidget {
  final Offset offset;
  final Color widgetcolor;
  DraggableWidget({Key key,this.offset,this.widgetcolor}) : super(key: key);
  @override
  _DraggableWidgetState createState() {
    return _DraggableWidgetState();
  }
}
class _DraggableWidgetState extends State<DraggableWidget> {
  Offset offset=Offset(0.0, 0.0);
  @override
  void initState() {
    super.initState();
    offset=widget.offset;
  }
  @override
  void dispose() {
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Positioned(
      left: offset.dx,
      top: offset.dy,
      child: Draggable(
        data: widget.widgetcolor,
        child: Container(
          width: 100.0,
          height: 100.0,
          color: widget.widgetcolor,
        ),
        feedback: Container(
          width: 110.0,
          height: 110.0,
          color: widget.widgetcolor.withOpacity(0.5),
        ),
        onDraggableCanceled: (Velocity velocity, Offset offset){
          setState(() {
            this.offset=offset;
          });
        },
      ),
    );
  }
}

这边我们自定义了一个 DraggableWidget 继承 StatefulWidget组件 我们在定义了2个变量熟悉

  final Offset offset;
  final Color widgetcolor;
  DraggableWidget({Key key,this.offset,this.widgetcolor}) : super(key: key);

Offset 和Color 需要我们在构造方法 实例化的时候传入

  Offset offset=Offset(0.0, 0.0);
  @override
  void initState() {
    super.initState();
    offset=widget.offset;
  }

我们定义一个offset 变量 让我们 offset=widget.offset; 在初始化赋值 方便我们后面调用

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Positioned(
      left: offset.dx,
      top: offset.dy,
      child: Draggable(
        data: widget.widgetcolor,
        child: Container(
          width: 100.0,
          height: 100.0,
          color: widget.widgetcolor
        ),
        feedback: Container(
          width: 110.0,
          height: 110.0,
          color: widget.widgetcolor.withOpacity(0.5),
        ),
        onDraggableCanceled: (Velocity velocity, Offset offset){
          setState(() {
            this.offset=offset;
          });
        },
      ),
    );
  }

我们在Widget build 方法里面 返回一个 Positioned 组件 分别设置 left 和top的 offset 然后在里面 嵌套一个 Draggable组件 并设置宽高 然后我们设置feedback 属性

   feedback: Container(
          width: 110.0,
          height: 110.0,
          color: widget.widgetcolor.withOpacity(0.5),
        ),

我们在 onDraggableCanceled 属性中讲返回的offset 赋值给我们定义的 offset

  onDraggableCanceled: (Velocity velocity, Offset offset){
          setState(() {
            this.offset=offset;
          });

这样我们的拖拽组件 DraggableWidget就定义好了
具体调用 ：

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


class DraggableDemo extends StatefulWidget {
  DraggableDemo({Key key}) : super(key: key);
  @override
  _DraggableDemoState createState() {
    return _DraggableDemoState();
  }
}

class _DraggableDemoState extends State<DraggableDemo> {
   Color  _draggablecolor=Colors.grey;
  void initState() {
    super.initState();
  }
  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: Stack(
        children: [
         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,
                  height: 200,
                  color: _draggablecolor,
                );
              },
            ),
          )
        ],
      ),
    );
  }
}

最后总结：

flutter里面提供了比较好拖拽组件的和设置其属性· 我们只需要按照需求自己封装就可以实现如上效果，还有更多其他酷炫效果这边就不展开讲了，有兴趣的同学可以自己多尝试， 最后希望我的文章能帮助到各位解决问题 ，以后我还会贡献更多有用的代码分享给大家。各位同学如果觉得文章还不错 ，麻烦给关注和star，小弟在这里谢过啦

项目地址：

码云 ： https://gitee.com/qiuyu123/flutter_draggabledemo.git