持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第13天,点击查看活动详情
ReorderableListView
ReorderableListView是通过长按拖动某一项到另一个位置来重新排序的列表组件。
ReorderableListView需要设置children
和onReorder
属性,children
是子控件,onReorder
是拖动完成后的回调,用法如下:
List<String> items = List.generate(40, (int i) => '$i');
ReorderableListView(
children: <Widget>[
for (String item in items)
Container(
key: ValueKey(item),
height: 100,
margin: EdgeInsets.symmetric(horizontal: 50, vertical: 10),
decoration: BoxDecoration(
color:
Colors.primaries[int.parse(item) % Colors.primaries.length],
borderRadius: BorderRadius.circular(10)),
child: Text(item,style: TextStyle(fontSize: 30),textAlign: TextAlign.center,),
)
],
onReorder: (int oldIndex, int newIndex) {
if (oldIndex < newIndex) {
newIndex -= 1;
}
var child = items.removeAt(oldIndex);
items.insert(newIndex, child);
setState(() {
});
},
)
长安子视图拖动效果:
ReorderableListView的每个子控件必须设置唯一的key,ReorderableListView没有“懒加载”模式,需要一次构建所有的子组件,所以ReorderableListView并不适合加载大量数据的列表,它适用于有限集合且需要排序的情况,比如手机系统里面设置语言的功能,通过拖动对语言排序。
onReorder
是拖动完成的回调,第一个参数是旧的数据索引,第二个参数是拖动到位置的索引,回调里面需要对数据进行排序并通过setState
刷新数据。
header
参数显示在列表的顶部,用法如下:
ReorderableListView(
header: Text(
'一枚有态度的程序员',
style: TextStyle(color: Colors.red,fontSize: 20),
textAlign: TextAlign.center,
),
...
)
运行效果:
reverse`参数设置为true且ReorderableListView的滚动方向为垂直时,滚动条直接滑动到底部,如果是水平方向则滚动条直接滑动到右边,默认为false,用法如下:
ReorderableListView(
reverse: true,
...
)
运行效果:
scrollDirection`参数表示滚动到方向,默认为垂直,设置为水平方向如下:
ReorderableListView(
scrollDirection: Axis.horizontal,
...
)
运行效果:
Draggable
Draggable系列组件可以让我们拖动组件。 Draggable组件有2个必须填写的参数,child
参数是子控件,feedback
参数是拖动时跟随移动的组件,用法如下:
Draggable(
child: Container(
height: 100,
width: 100,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10)
),
child: Text('璋',style: TextStyle(color: Colors.white,fontSize: 20),),
),
feedback: Container(
height: 100,
width: 100,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.circular(10)
),
child: Text('三',style: TextStyle(color: Colors.white,fontSize: 20),),
)
)
运行效果:
蓝色的组件是feedback
,如果想在拖动的时候子组件显示其他样式可以使用childWhenDragging
参数,用法如下:
childWhenDragging: Container(
height: 100,
width: 100,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.circular(10),
),
child: Text('王',
style: TextStyle(
color: Colors.white,
fontSize: 18),
),
),
我们还可以控制拖动的方向,比如只允许垂直方向移动,代码如下:
Draggable(
axis: Axis.vertical,
...
)
Draggable组件为我们提供了5种拖动过程中的回调事件,用法如下:
Draggable(
// axis: Axis.vertical,
child: Container(
height: 100,
width: 100,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10)
),
child: Text('璋',style: TextStyle(color: Colors.white,fontSize: 20),),
),
feedback: Container(
height: 100,
width: 100,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(10)
),
child: Text('三',style: TextStyle(color: Colors.white,fontSize: 20),),
),
childWhenDragging: Container(
height: 100,
width: 100,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.circular(10),
),
child: Text('王',
style: TextStyle(
color: Colors.white,
fontSize: 18),
),
),
onDragStarted: (){
print('onDragStarted');
},
onDragEnd: (DraggableDetails details){
print('onDragEnd:$details');
},
onDraggableCanceled: (Velocity velocity,Offset offset){
print('onDraggableCancel velocity:$velocity,offset:$offset');
},
onDragCompleted: (){
print('onDragCompleted');
},
onDragUpdate: (DragUpdateDetails details){
print('onDragUpdate');
},
)
说明如下:
onDragStarted:开始拖动时回调。
onDragEnd:拖动结束时回调。
onDraggableCanceled:未拖动到DragTarget控件上时回调。
onDragCompleted:拖动到DragTarget控件上时回调。
onDragUpdate:拖动过程中更新回调。
Draggable有一个data
参数,这个参数是和DragTarget配合使用的,当用户将控件拖动到DragTarget时此数据会传递给DragTarget。
DragTarget
DragTarget就像他的名字一样,指定一个目的地,Draggable组件可以拖动到此控件,
属性 说明
builder被调用来构建这个小部件的内容
Widget DragTargetBuilder (
BuildContext context,
List<T> candidateData,// 传递的数据 集合
List rejectedData // 不会被接收的数据集合
)
onWillAccept 是否接收拖动目标给定数据
onAccept 接收数据时调用
onLeave 拖动部件 离开时调用
用法如下:
DragTarget(
builder: (BuildContext context, List<dynamic> candidateData,
List<dynamic> rejectedData) {
...
}
)
当onWillAccept返回true时, candidateData参数的数据是Draggable的data数据。
当onWillAccept返回false时, rejectedData参数的数据是Draggable的data数据,
DragTarget有3个回调,说明如下:
onWillAccept:拖到该控件上时调用,需要返回true或者false,返回true,松手后会回调onAccept,否则回调onLeave。
onAccept:onWillAccept返回true时,用户松手后调用。
onLeave:onWillAccept返回false时,用户松手后调用。
用法如下:
DragTarget(
builder: (BuildContext context, List<Object?> candidateData,
List<dynamic> rejectedData) {
return Container(
alignment: Alignment.center,
height: 250,
width: 250,
color: Colors.black26,
child: Text('data'),
);
},
onAccept: (String data) {
print(data);
},
onLeave:(String data){
//数据来了 又离开了
print('onLeave : $data');
},
)
LongPressDraggable
LongPressDraggable继承自Draggable,因此用法和Draggable完全一样,唯一的区别就是LongPressDraggable触发拖动的方式是长按,而Draggable触发拖动的方式是按下。
总结:
本篇主要介绍了ReorderableListView拖动排序组件和Draggable拖动组件以及一些相关的子类,基础的构造参数和使用方法。
今天的文章13、 Flutter Widgets 之 ReorderableListView和Draggable拖拽排序与拖动组件分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/23304.html