快捷導(dǎo)航

Android簡(jiǎn)單實(shí)用的可拖拽GridView組件分享

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

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

前言

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

GraggableGridView 使用

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

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

正常使用的時(shí)候，基本上我們把這些屬性設(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)建子元素列表的方法，實(shí)際上就是用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還有兩個(gè)參數(shù)可以供我們使用：

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

我們有了上面的框架后，大部分情況下，只需要控制要顯示的子元素和尺寸就可以了，比如我們換成圖片，只需要更改_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,
      ),
    ),
  );
}