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

前言

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。

IT界著名的尼古拉斯·高尔包曾说：轮子是IT进步的阶梯！热门的框架千篇一律，好用轮子万里挑一！Flutter作为这两年开始崛起的跨平台开发框架，其第三方生态相比其他成熟框架还略有不足，但轮子的数量也已经很多了。本系列文章挑选日常app开发常用的轮子分享出来，给大家提高搬砖效率，同时也希望flutter的生态越来越完善，轮子越来越多。

本系列文章准备了超过50个轮子推荐，工作原因，尽量每1-2天出一篇文章。

tip:本系列文章合适已有部分flutter基础的开发者，入门请戳：flutter官网

正文

轮子

• 轮子名称：drag_list
• 轮子概述：flutter拖动排序元素.
• 轮子作者：[email protected]
• 推荐指数：★★★★
• 常用指数：★★★

• 效果预览：

  
  
  效果图

安装

dependencies:
  drag_list: ^1.0.4

import 'package:drag_list/drag_list.dart';

基本使用

List data=['1','2','3','4','5'];

DragList(
    items: data,
    itemExtent: 72.0,
    builder: (context, item, handle) {
        return Container(
            height: 72.0,
            child: Row(children: [
                Spacer(),
                Text(item),
                Spacer(),
                handle,
            ]),
        );
    },
)

横向+自定义拖动点组件+修改源数据

DragList(
    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.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(),
            ]),
        );
    },
)

结尾

• 轮子仓库地址：https://pub.flutter-io.cn/packages/drag_list
• 系列演示demo源码：https://github.com/826327700/flutter_plugins_demo