快捷導(dǎo)航

Android簡單實用的可拖拽GridView組件分享

更新時間：2023年06月28日 08:35:55 作者：島上碼農(nóng)

在我們?nèi)粘ｉ_發(fā)中，使用?GridView?這種網(wǎng)格視圖的場合還是不少的，本篇我們來介紹一個支持拖拽的?GridView?組件，可以輕松搞定網(wǎng)格視圖的拖拽排序，需要的可以參考一下

前言

在我們?nèi)粘ｉ_發(fā)中，使用 GridView 這種網(wǎng)格視圖的場合還是不少的，比如照片墻、九宮格等等。有一個場景就是需要對網(wǎng)格的元素進行拖拽排序，這個時候 Flutter 自帶的GridView 就無法滿足了。本篇我們來介紹一個支持拖拽的 GridView 組件，可以輕松搞定網(wǎng)格視圖的拖拽排序，這個組件就是 flutter_draggable_gridview。

GraggableGridView 使用

flutter_draggable_gridview使用一個DraggableGridViewBuilder來構(gòu)建可拖拽的 GridView，內(nèi)部實際上還是基于 GridView 實現(xiàn)的，因此 GridView 的一些配置還是可以沿用。DraggableGridViewBuilder的一些特有的屬性如下：

chidren：要求返回的子組件列表需要是 DraggableGridItem，實際上我們可以用DraggableGridItem來包裹我們要展示的元素即可。
isOnlyLongPress：是否只有長按才能觸發(fā)拖拽，默認是 true。
dragCompletion：完成拖拽后的回調(diào)，會告訴我們哪兩個元素進行了位置互換，通過互換的元素的下標我們可以知道拖拽后的次序。如果需要保存的話就可以提交拖拽后的次序到后端更新。
dragFeedback：一個回調(diào)函數(shù)，當拖拽開始后可以返回一個組件，來突顯正在被控制拖動的元素。通常是將原先的組件尺寸縮小。
dragPlaceHolder：元素被拖動后，留下的空白位置的占位組件，可以自定義任何組件。

正常使用的時候，基本上我們把這些屬性設(shè)置好就能用了。比如下面的代碼：

DraggableGridViewBuilder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    childAspectRatio: MediaQuery.of(context).size.width /
        (MediaQuery.of(context).size.height / 3),
  ),
  children: _makeGridItems(12),
  isOnlyLongPress: true,
  dragCompletion:
      (List<DraggableGridItem> list, int beforeIndex, int afterIndex) {
    if (kDebugMode) {
      print('onDragAccept: $beforeIndex -> $afterIndex');
    }
  },
  dragFeedback: (List<DraggableGridItem> list, int index) {
    return SizedBox(
      width: 200,
      height: 150,
      child: list[index].child,
    );
  },
  dragStartBehavior: DragStartBehavior.start,
  dragPlaceHolder: (List<DraggableGridItem> list, int index) {
    return PlaceHolderWidget(
      child: Container(
        color: Colors.blue[100],
      ),
    );
  },
)

這里的_makeGridItems方法就是構(gòu)建子元素列表的方法，實際上就是用DraggableGridItem包裹一層要顯示的組件。

List<DraggableGridItem> _makeGridItems(int count) {
  var colors = [
    Colors.blue,
    Colors.red[400],
    Colors.amber,
    Colors.orange,
    Colors.purple
  ];
  return List.generate(
    count,
    (index) => DraggableGridItem(
      isDraggable: true,
      child: Container(
        color: colors[index % colors.length],
        child: Center(
          child: Material(
            color: Colors.transparent,
            child: Text('$index'),
          ),
        ),
      ),
    ),
  );
}

DraggableGridItem還有兩個參數(shù)可以供我們使用：

isDraggable：是否可以拖拽，默認是 false，比如我們有些元素是固定不可以改變的（如置頂元素），那么就可以設(shè)置為 false。
dragCallback：在拖拽過程中，當一個元素正在被推擠時，回調(diào)函數(shù)中的第二個參數(shù) isDragging 會為 true。我們可以通過這個參數(shù)來做一些處理，比如高亮當前被推擠的元素。

我們有了上面的框架后，大部分情況下，只需要控制要顯示的子元素和尺寸就可以了，比如我們換成圖片，只需要更改_makeGridItems，將DraggableGridItem 的 child 的子組件更換為圖片組件就搞定了。

List<DraggableGridItem> _makeGridItems(int count) {
  var assetsName = [
    'images/earth.jpeg',
    'images/fire.png',
    'images/girl.jpeg',
    'images/island-coder.png',
    'images/mb.jpeg'
  ];
  return List.generate(
    count,
    (index) => DraggableGridItem(
      isDraggable: true,
      dragCallback: (_, isDragging) {
        debugPrint('{$index}在拖拽：{$isDragging}');
      },
      child: Image.asset(
        assetsName[index % assetsName.length],
        fit: BoxFit.cover,
      ),
    ),
  );
}