前言
Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。
IT界著名的尼古拉斯·高尔包曾说：轮子是IT进步的阶梯！热门的框架千篇一律，好用轮子万里挑一！Flutter作为这两年开始崛起的跨平台开发框架，其第三方生态相比其他成熟框架还略有不足，但轮子的数量也已经很多了。本系列文章挑选日常app开发常用的轮子分享出来，给大家提高搬砖效率，同时也希望flutter的生态越来越完善，轮子越来越多。
本系列文章准备了超过50个轮子推荐，工作原因，尽量每1-2天出一篇文章。
tip:本系列文章合适已有部分flutter基础的开发者，入门请戳：flutter官网
正文
轮子
- 轮子名称：drag_list
- 轮子概述：flutter拖动排序元素.
- 轮子作者：t.wyrowinski@gmail.com
- 推荐指数：★★★★
- 常用指数：★★★
-
效果预览：
效果图
安装
dependencies:
drag_list: ^1.0.4
import 'package:drag_list/drag_list.dart';
基本使用
List<String> data=['1','2','3','4','5'];
DragList<String>(
items: data,
itemExtent: 72.0,
builder: (context, item, handle) {
return Container(
height: 72.0,
child: Row(children: [
Spacer(),
Text(item),
Spacer(),
handle,
]),
);
},
)
横向+自定义拖动点组件+修改源数据
DragList<String>(
items: data,
itemExtent: 100,
scrollDirection: Axis.horizontal,//设置为横向
builder: (context, item, handle) {
return Container(
height: 100.0,
width: 100,
child: Row(children: [
Spacer(),
Text(item),
Spacer(),
handle,
]),
);
},
handleBuilder: (_) { //自定义拖动点组件
return Padding(
padding: EdgeInsets.symmetric(vertical: 8.0),
child: Icon(Icons.arrow_forward),
);
},
onItemReorder: (from, to) { //修改数据源
var temp=data[from];
data[from]=data[to];
data[to]=temp;
setState(() {
});
},
)
不设置拖动点：组件本体拖动
DragList<String>.handleless( //使用handleless取消拖动点 并使得整个widget可以拖动
items: data,
itemExtent: 100,
scrollDirection: Axis.horizontal,
builder: (context, item) {
return Container(
height: 100.0,
width: 100,
child: Row(children: [
Spacer(),
Text(item),
Spacer(),
]),
);
},
)
