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…