flutter Draggable Widget拖拽控件
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,
);
}),
demo
import 'package:flutter/material.dart';
import 'package:flutter_app/pages/SplashScreen.dart'; import 'ToolTipDemo.dart';
import 'draggable_demo.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.green, //定义主题风格 primarySwatch
),
home: DraggableDemo(),
);
} }
import 'package:flutter/material.dart'; import 'draggable_widget.dart'; class DraggableDemo extends StatefulWidget {
@override
_DraggableDemoState createState() => _DraggableDemoState();
} class _DraggableDemoState extends State<DraggableDemo> {
Color _draggableColor = Colors.grey; @override
Widget build(BuildContext context) {
return Scaffold(
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,
);
}),
)
],
));
}
}
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);
@override
void initState() {
super.initState();
offset = widget.offset;
} @override
Widget build(BuildContext context) {
return Positioned(
left: offset.dx,
top:offset.dy,
child: 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;
});
},
),
);
}
}
效果:
flutter Draggable Widget拖拽控件的更多相关文章
- Flutter 拖拽控件Draggable
Flutter提供了强大的拖拽控件,可以灵活定制,并且非常简单.下面作一个拖拽的案例. Draggable Widget Draggable控件负责就是拖拽,父层使用了Draggable,它的子元素就 ...
- 【C#/WPF】GridSplitter 分割布局,拖拽控件分隔栏以改变控件尺寸
需求:界面由多部分控件组成,想要拖拽控件之间的分隔栏以改变尺寸. MainWindow.xaml: <Grid> <Grid.ColumnDefinitions> <Co ...
- Unity编辑器 - DragAndDrop拖拽控件
Unity编辑器 - DragAndDrop拖拽控件 Unity编辑器的拖拽(DragAndDrop)在网上能找到的资料少,自己稍微研究了一下,写了个相对完整的案例,效果如下 代码: object d ...
- Flutter 拖拽控件Draggable看这一篇就够了
注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 Draggable系列组件可以让我们拖动组件. Dragg ...
- ios-将代码创建的视图控件放入拖拽控件的下面
如图所示 图片是拖拽上去的imageView,橘黄色控件是在代码中创建的添加上去的,此时黄色view在imageView 上方 调用方法bringSubviewToFront:试图将imageView ...
- H5实现多图片预览上传,可点击可拖拽控件介绍
版权声明:欢迎转载,请注明出处:http://blog.csdn.net/weixin_36380516 在做图片上传时发现一个蛮好用的控件,支持多张图片同时上传,可以点击选择图片,也可以将图片拖拽到 ...
- 拖拽控件java版
Button vv = new Button("vvvv"); DragSource.getDefaultDragSource().createDefaultDragGestur ...
- 开发winform程序,在拖拽控件大小时,VS会卡死
你可以看看你最近有没有装什么新的软件,比如说:有道词典就会与VS有冲突,导致卡死,可以把进程关闭.
- 【C#】自定义容器控件,设置界面控件,支持设计器拖入控件
先上效果图: 1.先重写设置界面的控件功能: public partial class SetterControl : UserControl { public SetterControl() { I ...
随机推荐
- 51nod 2381 个人所得税
牛牛已知每月的税前收入,他想知道在新个税下,税收后收入是多少?个税计算方法是这样的: 综合所得金额 - 新起征点5000元 = 应纳税所得额 其中 综合所得金额 就是税前收入,(你可以忽略五险一金,专 ...
- C# 4.0 新特性(.NET Framework 4.0 与 Visual Studio 2010 )
一.dynamic binding:动态绑定 在通过 dynamic 类型实现的操作中,该类型的作用是不在编译时类型检查,而是在运行时解析这些操作.dynamic 类型简化了对 COM API(例如 ...
- 《了解python》
编程语言的发展史: 1.机器语言 站在计算机角度,直接用二进制跟计算机直接沟通,直接操控硬件 优点:计算机能够直接读懂,运行速度快 缺点:开发效率低 2.汇编语言 站在计算机角度,用简单的英文标签标识 ...
- Hibernate的关联关系映射
技术分析之Hibernate的关联关系映射之一对多映射(重点) 1. JavaWEB中一对多的设计及其建表原则 2. 先导入SQL的建表语句 ...
- hibernate之关联关系一对多
什么是关联(association) 关联指的是类之间的引用关系.如果类A与类B关联,那么被引用的类B将被定义为类A的属性.例如: public class B{ private St ...
- 洛谷 P1005 动态规划 大数
Problem Description 帅帅经常跟同学玩一个矩阵取数游戏:对于一个给定的n×m的矩阵,矩阵中的每个元素a(i,j)均为非负整数.游戏规则如下: 1 每次取数时须从每行各取走一个元素,共 ...
- sqoop job 实现自动增量导入
一.测试环境 1.MySQL表结构 mysql> show create table autoextend\GCREATE TABLE `autoextend` ( `id` bigint(2 ...
- Apache Kylin在4399大数据平台的应用
来自:AI前线(微信号:ai-front),作者:林兴财,编辑:Natalie作者介绍:林兴财,毕业于厦门大学计算机科学与技术专业.有多年的嵌入式开发.系统运维经验,现就职于四三九九网络股份有限公司, ...
- 繁繁的数字 背包DP
繁繁的数字 背包DP 问一个数\(n\)有多少种二进制分解方案数 \(n\le 10^5\) 如7有7=4+2+1=4+1+1+1=2+2+2+1=2+2+1+1+1=2+1+1+1+1+1=1+1+ ...
- 2017.10.6 国庆清北 D6T2 同余方程组
题目描述 求关于x 的同余方程组 x%a1 = b1 x%a2 = b2 x%a3 = b3 x%a4 = b4 的大于等于0 的最小整数解. 输入输出格式 输入格式: 一行8 个整数,表示a1; b ...