flutter好用的轮子推荐十-flutter拖动排序元素

前言

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(),
            ]),
        );
    },
)
复制代码

结尾

• 轮子仓库地址：pub.flutter-io.cn/packages/dr…
• 系列演示demo源码：github.com/826327700/f…