阅读 1666

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

结尾

关注下面的标签,发现更多相似文章
评论