前语

在咱们日常开发中，运用 GridView 这种网格视图的场合仍是不少的，比方相片墙、九宫格等等。有一个场景便是需求对网格的元素进行拖拽排序，这个时分 Flutter 自带的GridView 就无法满意了。本篇咱们来介绍一个支持拖拽的 GridView 组件，能够轻松搞定网格视图的拖拽排序，这个组件便是 flutter_draggable_gridview。

推荐一个简单实用的可拖拽的 GridView 组件

GraggableGridView 运用

flutter_draggable_gridview运用一个DraggableGridViewBuilder来构建可拖拽的 GridView，内部实际上仍是根据 GridView 完结的，因而 GridView 的一些装备仍是能够沿袭。DraggableGridViewBuilder的一些特有的特点如下：

  • chidren：要求回来的子组件列表需求是 DraggableGridItem，实际上咱们能够用DraggableGridItem来包裹咱们要展示的元素即可。
  • isOnlyLongPress：是否只要长按才能触发拖拽，默许是 true。
  • dragCompletion：完结拖拽后的回调，会告知咱们哪两个元素进行了方位交换，经过交换的元素的下标咱们能够知道拖拽后的次第。如果需求保存的话就能够提交拖拽后的次第到后端更新。
  • dragFeedback：一个回调函数，当拖拽开始后能够回来一个组件，来突显正在被操控拖动的元素。通常是将原先的组件尺寸缩小。
  • dragPlaceHolder：元素被拖动后，留下的空白方位的占位组件，能够自定义任何组件。

正常运用的时分，基本上咱们把这些特点设置好就能用了。比方下面的代码：

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方法便是构建子元素列表的方法，实际上便是用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还有两个参数能够供咱们运用：

  • isDraggable：是否能够拖拽， 默许是 false，比方咱们有些元素是固定不能够改变的（如置顶元素），那么就能够设置为 false。
  • dragCallback：在拖拽过程中，当一个元素正在被推挤时，回调函数中的第二个参数 isDragging 会为 true。咱们能够经过这个参数来做一些处理，比方高亮当时被推挤的元素。

咱们有了上面的框架后，大部分情况下，只需求操控要显现的子元素和尺寸就能够了，比方咱们换成图片，只需求更改_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,
      ),
    ),
  );
}

总结

本篇向我们引荐了一款简略实用的可拖拽 GridView 组件，基本上能够满意咱们大部分支持拖拽的网格视图使用。我们如果有用过相似的组件，也欢迎在谈论区引荐一下。

我是岛上码农，微信大众号同名。如有问题能够加本人微信沟通，微信号：island-coder。

：觉得有收获请点个赞鼓舞一下！

：保藏文章，方便回看哦！

：谈论沟通，互相前进！