flutter 拖拽布局_Flutter 拖拽组件案例实现

前言 ：

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

准备工作：

需要安装flutter的开发环境：大家可以去看看之前的教程：

1 win系统flutter开发环境安装教程: https://www.jianshu.com/p/152447bc8718

2 mac系统flutter开发环境安装教程：https://www.jianshu.com/p/bad2c35b41e3

效果图：

具体实现：

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 {

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 {

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，小弟在这里谢过啦

项目地址：

QQ 交流群: