Flutter 拖拽控制項Draggable

2022-06-08 07:33:09 字數 1793 閱讀 4273

flutter提供了強大的拖拽控制項,可以靈活定製,並且非常簡單。下面作乙個拖拽的案例。

draggable控制項負責就是拖拽,父層使用了draggable,它的子元素就是可以拖動的,子元素可以實容器,可以是。用起來非常的靈活。

引數說明:

draggable( //

拖拽元件

data:widget.widgetcolor,

child:container(

width:

100.0

, height:

100.0

, color: widget.widgetcolor,

),feedback:container(

//feedback:拖動控制項時子元素的樣子

width: 100.0

, height:

100.0

, color: widget.widgetcolor.withopacity(

0.5),

), ondraggablecanceled:(velocity velocity,offset offset));

},),

dragtarget是用來接收拖拽事件的控制項,當把draggable放到dragtarget裡時,他會接收draggable傳遞過來的值,然後用生成器改變元件狀態。

dragtarget(

onaccept: (color color),

builder: (context, candidatedata, rejecteddata),

),

完整**如下:

import '

package:flutter/material.dart';

import

'draggable_demo.dart';

class

@override

widget build(buildcontext context)

}

draggable_demo.dart**:

import '

package:flutter/material.dart';

import

'draggable_widget.dart';

class

draggabledemo extends statefulwidget

class _draggabledemostate extends state,

builder: (context, candidatedata, rejecteddata),

),),

],),

);}}

draggable_widget.dart**:

class

draggablewidget extends statefulwidget ):super(key:key);

_draggablewidgetstate createstate() =>_draggablewidgetstate();

}class _draggablewidgetstate extends state

@override

widget build(buildcontext context) );

},),

);}}

原生js使用drag實現拖拽排序

先介紹一下html5的drag屬性,拖放 drag 和 drop 是 html5 標準的組成部分。想要啟用drag,只要給元素加上draggable true 就行了 safari 5.1.2除外 實際效果 拖動事件 了解事件詳情 事件分為兩類,當前拖動的元素上的事件,以及要放置的位置接收到的事件。...

vue下使用drag完成簡單拖拽

因為沒有時間研究jquery的sortable功能 也沒有文件 所以用html5的drag完成了簡單的拖拽,這裡記錄下 dragstart dragover dragend dragable dragable 確認可以被拖拽的元素 script內部 拖拽開始 ondragstart e 拖拽過程 o...

Flutter控制項 Container

container 乙個方便的 widget,它組合了常見的繪畫 定位和大小的 widget,在flutter中非常常見。顏色,邊框,填充形狀,陰影,漸變色,背景。container 首先會使用 padding 來圍繞在 child 周圍 也包括 decoration 中存在的邊框 新增額外的約束限...