300行代码实现拖拽排序？这次就来挑战一下！（三）—— 拖拽&碰撞，你死我活

2024-02-09 12:11:24

Flutter 中拖拽排序的实现：不再修改系统源码

概述

在本文中，我们将深入探讨如何使用纯 Flutter 代码在 Flutter 中实现拖拽排序，而无需修改系统源码。拖拽排序是一种常见且用户友好的交互模式，允许用户重新排列项目列表，以满足他们的喜好或特定的组织标准。我们将从我们上一篇博文中的失败尝试开始，介绍我们的新方法，并提供详细的代码示例。

上一篇博文的失败尝试

在我们的上一篇博文中，我们尝试使用 Draggable 和 DragTarget 组件来实现拖拽排序。虽然这个方法可以处理基本拖拽功能，但它无法可靠地处理项目之间的碰撞。这导致了项目堆积和意外的行为。

新的方法

为了解决上一篇博文中的问题，我们采用了不同的方法。这一次，我们将使用 GestureDetector 组件来监听项目拖拽和碰撞事件。GestureDetector 提供了丰富的事件回调，使我们能够精确地检测项目之间的碰撞并调整它们的位置。

以下是改进后的 DragAndDropItem 组件：

class DragAndDropItem extends StatelessWidget {
  const DragAndDropItem({
    required this.id,
    required this.child,
    this.onDragUpdate,
    this.onDragEnd,
    this.onPointerMove,
  });

  final int id;
  final Widget child;
  final GestureDragUpdateCallback? onDragUpdate;
  final GestureDragEndCallback? onDragEnd;
  final GesturePointerMoveCallback? onPointerMove;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onHorizontalDragUpdate: onDragUpdate,
      onHorizontalDragEnd: onDragEnd,
      onPointerMove: onPointerMove,
      child: child,
    );
  }
}

这个组件监听三个主要事件：

onHorizontalDragUpdate：在拖拽过程中持续调用，提供拖拽详情。
onHorizontalDragEnd：在拖拽结束时调用，提供拖拽结束详情。
onPointerMove：在指针移动时调用，即使没有拖拽也调用。

完整的实现

接下来，我们将这个改进后的组件应用到我们的拖拽排序列表中：

class DragAndDropList extends StatefulWidget {
  const DragAndDropList({
    required this.items,
    this.onReorder,
  });

  final List<int> items;
  final ValueChanged<List<int>>? onReorder;

  @override
  State<DragAndDropList> createState() => _DragAndDropListState();
}

class _DragAndDropListState extends State<DragAndDropList> {
  List<int> _items;
  int? _draggingIndex;

  @override
  void initState() {
    super.initState();
    _items = widget.items;
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: _items.length,
      itemBuilder: (context, index) {
        return DragAndDropItem(
          id: _items[index],
          child: _buildItem(_items[index]),
          onDragUpdate: (details) => _onDragUpdate(details, index),
          onDragEnd: (details) => _onDragEnd(details, index),
          onPointerMove: (details) => _onPointerMove(details, index),
        );
      },
    );
  }

  Widget _buildItem(int id) {
    // TODO: Implement item builder
  }

  void _onDragUpdate(DragUpdateDetails details, int index) {
    // TODO: Implement drag update handler
  }

  void _onDragEnd(DragEndDetails details, int index) {
    // TODO: Implement drag end handler
  }

  void _onPointerMove(PointerMoveEvent details, int index) {
    // TODO: Implement pointer move handler
  }
}