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拖拽控件的更多相关文章

  1. Flutter 拖拽控件Draggable

    Flutter提供了强大的拖拽控件,可以灵活定制,并且非常简单.下面作一个拖拽的案例. Draggable Widget Draggable控件负责就是拖拽,父层使用了Draggable,它的子元素就 ...

  2. 【C#/WPF】GridSplitter 分割布局,拖拽控件分隔栏以改变控件尺寸

    需求:界面由多部分控件组成,想要拖拽控件之间的分隔栏以改变尺寸. MainWindow.xaml: <Grid> <Grid.ColumnDefinitions> <Co ...

  3. Unity编辑器 - DragAndDrop拖拽控件

    Unity编辑器 - DragAndDrop拖拽控件 Unity编辑器的拖拽(DragAndDrop)在网上能找到的资料少,自己稍微研究了一下,写了个相对完整的案例,效果如下 代码: object d ...

  4. Flutter 拖拽控件Draggable看这一篇就够了

    注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 Draggable系列组件可以让我们拖动组件. Dragg ...

  5. ios-将代码创建的视图控件放入拖拽控件的下面

    如图所示 图片是拖拽上去的imageView,橘黄色控件是在代码中创建的添加上去的,此时黄色view在imageView 上方 调用方法bringSubviewToFront:试图将imageView ...

  6. H5实现多图片预览上传,可点击可拖拽控件介绍

    版权声明:欢迎转载,请注明出处:http://blog.csdn.net/weixin_36380516 在做图片上传时发现一个蛮好用的控件,支持多张图片同时上传,可以点击选择图片,也可以将图片拖拽到 ...

  7. 拖拽控件java版

    Button vv = new Button("vvvv");  DragSource.getDefaultDragSource().createDefaultDragGestur ...

  8. 开发winform程序,在拖拽控件大小时,VS会卡死

    你可以看看你最近有没有装什么新的软件,比如说:有道词典就会与VS有冲突,导致卡死,可以把进程关闭.

  9. 【C#】自定义容器控件,设置界面控件,支持设计器拖入控件

    先上效果图: 1.先重写设置界面的控件功能: public partial class SetterControl : UserControl { public SetterControl() { I ...

随机推荐

  1. 51nod 2381 个人所得税

    牛牛已知每月的税前收入,他想知道在新个税下,税收后收入是多少?个税计算方法是这样的: 综合所得金额 - 新起征点5000元 = 应纳税所得额 其中 综合所得金额 就是税前收入,(你可以忽略五险一金,专 ...

  2. C# 4.0 新特性(.NET Framework 4.0 与 Visual Studio 2010 )

    一.dynamic binding:动态绑定 在通过 dynamic 类型实现的操作中,该类型的作用是不在编译时类型检查,而是在运行时解析这些操作.dynamic 类型简化了对 COM API(例如 ...

  3. 《了解python》

    编程语言的发展史: 1.机器语言 站在计算机角度,直接用二进制跟计算机直接沟通,直接操控硬件 优点:计算机能够直接读懂,运行速度快 缺点:开发效率低 2.汇编语言 站在计算机角度,用简单的英文标签标识 ...

  4. Hibernate的关联关系映射

    技术分析之Hibernate的关联关系映射之一对多映射(重点)        1. JavaWEB中一对多的设计及其建表原则        2. 先导入SQL的建表语句                 ...

  5. hibernate之关联关系一对多

    什么是关联(association) 关联指的是类之间的引用关系.如果类A与类B关联,那么被引用的类B将被定义为类A的属性.例如:  public class B{        private St ...

  6. 洛谷 P1005 动态规划 大数

    Problem Description 帅帅经常跟同学玩一个矩阵取数游戏:对于一个给定的n×m的矩阵,矩阵中的每个元素a(i,j)均为非负整数.游戏规则如下: 1 每次取数时须从每行各取走一个元素,共 ...

  7. sqoop job 实现自动增量导入

    一.测试环境 1.MySQL表结构 mysql> show create table autoextend\GCREATE TABLE `autoextend` (  `id` bigint(2 ...

  8. Apache Kylin在4399大数据平台的应用

    来自:AI前线(微信号:ai-front),作者:林兴财,编辑:Natalie作者介绍:林兴财,毕业于厦门大学计算机科学与技术专业.有多年的嵌入式开发.系统运维经验,现就职于四三九九网络股份有限公司, ...

  9. 繁繁的数字 背包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+ ...

  10. 2017.10.6 国庆清北 D6T2 同余方程组

    题目描述 求关于x 的同余方程组 x%a1 = b1 x%a2 = b2 x%a3 = b3 x%a4 = b4 的大于等于0 的最小整数解. 输入输出格式 输入格式: 一行8 个整数,表示a1; b ...