前言

Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面。

IT界著名的尼古拉斯·高爾包曾說：輪子是IT進(jìn)步的階梯！熱門的框架千篇一律，好用輪子萬里挑一！Flutter作為這兩年開始崛起的跨平臺開發(fā)框架，其第三方生態(tài)相比其他成熟框架還略有不足，但輪子的數(shù)量也已經(jīng)很多了。本系列文章挑選日常app開發(fā)常用的輪子分享出來，給大家提高搬磚效率，同時也希望flutter的生態(tài)越來越完善，輪子越來越多。

本系列文章準(zhǔn)備了超過50個輪子推薦，工作原因，盡量每1-2天出一篇文章。

tip:本系列文章合適已有部分flutter基礎(chǔ)的開發(fā)者，入門請戳：flutter官網(wǎng)

正文

輪子

• 輪子名稱：drag_list
• 輪子概述：flutter拖動排序元素.
• 輪子作者：t.wyrowinski@gmail.com
• 推薦指數(shù)：★★★★
• 常用指數(shù)：★★★

• 效果預(yù)覽：

  
  
  效果圖

安裝

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

橫向+自定義拖動點組件+修改源數(shù)據(jù)

DragList<String>(
    items: data,
    itemExtent: 100,
    scrollDirection: Axis.horizontal,//設(shè)置為橫向
    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) { //修改數(shù)據(jù)源
        var temp=data[from];
        data[from]=data[to];
        data[to]=temp;
        setState(() {
            
        });
    },
)

不設(shè)置拖動點：組件本體拖動

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

結(jié)尾

• 輪子倉庫地址：https://pub.flutter-io.cn/packages/drag_list
• 系列演示demo源碼：https://github.com/826327700/flutter_plugins_demo