Flutter可拖拽控件GragableGridview

hello 今天爲大家介紹一款可拖拽控件GragableGridview，先看效果圖

怎麼樣！長按即可觸發編輯效果，當然，你也可以通過按鈕來觸發編輯，點擊紅色的叉叉圖標即可刪除Item，由於源碼太複雜，導致我現在也看不懂，我目前正在修改，加備註，以後給大家講解代碼，我們先看看怎麼使用它吧

Usage 控件使用：

第一步：將以下代碼添加到 pubspec.yaml 文件裏

dependencies:
  dragablegridview_flutter: ^0.1.3

第二步：在你要使用控件的文件裏進行導包

import 'package:dragablegridview_flutter/dragablegridview_flutter.dart';

第三步：你的 GridView 數據承載類Bin 必須繼承 DragAbleGridViewBin；在你的Bin文件導包

import 'package:dragablegridview_flutter/dragablegridviewbin.dart';

第四步：實現你的業務（以下都是我寫的示例代碼）

    Bin類示例，要什麼變量添加就行，不用管繼承的變量

import 'package:dragablegridview_flutter/dragablegridviewbin.dart';

class ItemBin extends DragAbleGridViewBin{

  ItemBin( this.data);

  String data;

  @override
  String toString() {
    return 'ItemBin{data: $data, dragPointX: $dragPointX, dragPointY: $dragPointY, lastTimePositionX: $lastTimePositionX, lastTimePositionY: $lastTimePositionY, containerKey: $containerKey, containerKeyChild: $containerKeyChild, isLongPress: $isLongPress, dragAble: $dragAble}';
  }
}

    Weidget 示例，使用很簡單的，一看就懂

import 'package:dragablegridview_flutter/dragablegridview_flutter.dart';
import 'package:flutter/material.dart';

import 'gridviewitembin.dart';


class DragAbleGridViewDemo extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return new DragAbleGridViewDemoState();
  }

}

class DragAbleGridViewDemoState extends State<DragAbleGridViewDemo>{

  List<ItemBin> itemBins=new List();
  String actionTxtEdit="編輯";
  String actionTxtComplete="完成";
  String actionTxt;
  var editSwitchController=EditSwitchController();

  @override
  void initState() {
    super.initState();
    actionTxt=actionTxtEdit;
    itemBins.add(new ItemBin("魯班"));
    itemBins.add(new ItemBin("虞姬"));
    itemBins.add(new ItemBin("甄姬"));
    itemBins.add(new ItemBin("黃蓋"));
    itemBins.add(new ItemBin("張飛"));
    itemBins.add(new ItemBin("關羽"));
    itemBins.add(new ItemBin("劉備"));
    itemBins.add(new ItemBin("曹操"));
    itemBins.add(new ItemBin("趙雲"));
    itemBins.add(new ItemBin("孫策"));
    itemBins.add(new ItemBin("莊周"));
    itemBins.add(new ItemBin("廉頗"));
    itemBins.add(new ItemBin("後裔"));
    itemBins.add(new ItemBin("妲己"));
    itemBins.add(new ItemBin("荊軻"));
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("可拖拽GridView"),
        actions: <Widget>[
          new Center(
              child: new GestureDetector(
                child: new Container(
                  child: new Text(actionTxt,style: TextStyle(fontSize: 19.0),),
                  margin: EdgeInsets.only(right: 12),
                ),
                onTap: (){
                  changeActionState();
                  editSwitchController.editStateChanged();
                },
              )
          )
        ],
      ),
      body: new DragAbleGridView(
        decoration: new BoxDecoration(
          borderRadius: BorderRadius.all(new Radius.circular(3.0)),
          border: new Border.all(color: Colors.blue),
        ),
        mainAxisSpacing:10.0,
        crossAxisSpacing:10.0,
        deleteIconName: "images/close.png",
        deleteIconMarginTopAndRight: 6.0,
        itemPadding: EdgeInsets.fromLTRB(8.0, 5.0, 8.0, 5.0),
        childAspectRatio:1.8,
        crossAxisCount: 4,
        itemBins:itemBins,
        editSwitchController:editSwitchController,
        child: (int position){
          return new Text(
            itemBins[position].data,
            style: new TextStyle(fontSize: 16.0,color: Colors.blue),);
        },
        editChangeListener: (){
          changeActionState();
        },
      ),
    );
  }

  void changeActionState(){
    if(actionTxt==actionTxtEdit){
      setState(() {
        actionTxt=actionTxtComplete;
      });
    }else{
      setState(() {
        actionTxt=actionTxtEdit;
      });
    }
  }
}

完成上面4步，你的dragableGridView已經可以動了，還是蠻簡單的，但是變量還是要介紹的，畢竟我寫的變量名只有我自己能看懂是上面意思

child	GridView的子控件下面的子控件（比較繞哈），可能是一個Text，也可能是一個Image
itemBins	item的數據信息，List<T>
crossAxisCount	GridView一行顯示幾個child
childAspectRatio	child的縱橫比
mainAxisSpacing	滑動方向child之間的空隙
crossAxisSpacing	和滑動方向垂直的那個方向上 child之間的空隙
itemPadding	child的pading
decoration	GridView的child的裝飾（因爲它的child是個Container）
deleteIconSize	刪除圖標的大小
deleteIconMarginTopAndRight	刪除圖標margin top  和 margin right 的值，因爲不設置的話，圖標位置感覺不太對
deleteIconName	刪除圖標的name 例如 images/close.png
editSwitchController	編輯開關控制器，可通過點擊按鈕觸發編輯
editChangeListener	長按觸發編輯狀態，可監聽狀態來改變編輯按鈕（編輯開關 ，通過按鈕觸發編輯）的狀態

變量就上面的，應該能滿足大家的需求，如果這都不能滿足，或者你有更好的意見，歡迎留言哈，代碼我完善厚，會補上的

如果在使用的過程中有什麼問題，也請留言，隨時爲你解答，

最後附上源碼地址：https://github.com/OpenFlutter/PullToRefresh；

裏面有很多更酷的控件，歡迎Star；如果喜歡Flutter，可以加入我們哦，我們的QQ羣是 ：892398530