Flutter实现丝滑的滑动删除、移动排序等-Dismissible控件详解

Dismissible 简介

Dismissible 是 Flutter 中用于实现可滑动删除或拖拽操作的一个有用的小部件。主要用于在用户对列表项或任何其他可滑动的元素执行删除或拖动操作时，提供一种简便的实现方式。

使用场景

• 列表项删除： 允许用户在列表中通过滑动手势删除某个项。
• 左右滑动： 提供可自定义的背景，当用户左滑或右滑时显示。
• 拖拽排序： 可用于实现拖拽排序，当用户长按并拖动列表项时，可以将其拖到新的位置。
• 任何需要滑动手势操作的场景： 适用于需要使用滑动手势进行操作的任何场景。

常用属性

• key (Key? key): 小部件的标识符。通常使用数据项的唯一标识作为 key。

• child (Widget child): 被包裹的小部件，即可滑动删除或拖拽的内容。

• onDismissed (void Function(DismissDirection direction)? onDismissed): 在滑动操作完成时调用的回调函数。回调参数 direction 表示滑动的方向，是 DismissDirection 枚举的一个值。

• direction (DismissDirection direction): 定义可滑动的方向。默认为 DismissDirection.horizontal，即水平方向。可以选择 DismissDirection.vertical、DismissDirection.endToStart、DismissDirection.startToEnd、DismissDirection.up、DismissDirection.down。

• resizeDuration (Duration? resizeDuration): 控制小部件大小调整的动画时间。如果设置为 null，则禁用动画，小部件的大小将立即调整。默认值为 const Duration(milliseconds: 200)。

• dismissThresholds (Map<DismissDirection, double>? dismissThresholds): 定义滑动多远触发 onDismissed 回调的阈值。键是 DismissDirection 枚举值，值是一个 double 类型，表示滑动的百分比。例如，{ DismissDirection.endToStart: 0.5 } 表示向左滑动超过 50% 触发回调。

• movementDuration (Duration? movementDuration): 定义调整小部件位置的动画时间。默认为 const Duration(milliseconds: 200)。

• crossAxisEndOffset (double crossAxisEndOffset): 当 direction 为 DismissDirection.horizontal 时，定义小部件在纵轴方向的偏移。正值表示向下偏移，负值表示向上偏移。默认为 0。

• background (Widget? background): 定义在拖动时显示的背景。通常是一个按钮或图标，用于执行删除等操作。

• secondaryBackground (Widget? secondaryBackground): 定义在拖动时显示的辅助背景，通常是一个按钮或图标，用于执行其他操作。当 direction 为 DismissDirection.horizontal 时，这是显示在右侧的背景。

• confirmDismiss (Future Function(DismissDirection direction)? confirmDismiss): 一个可选的回调函数，用于在实际执行滑动删除或拖拽之前确认是否执行。如果返回 true，则执行删除或拖拽操作；如果返回 false，则取消操作。回调参数 direction 表示滑动的方向。

• dragStartBehavior (DragStartBehavior? dragStartBehavior): 定义在拖动开始时处理拖动的方式。默认为 DragStartBehavior.start。

• crossAxisStartDragOffset (double crossAxisStartDragOffset): 定义在纵轴方向上开始拖动的偏移量。正值表示向下偏移，负值表示向上偏移。默认为 0。

• movementDurationVsCurrent} (bool? movementDurationVsCurrent): 在处理滑动时，如果设置为 true，将使用当前小部件的尺寸来计算移动的距离，而不是使用小部件被滑动前的尺寸。默认为 false。

这些属性提供了很多灵活性，可以根据具体需求来定制滑动删除或拖拽的交互效果。在使用时，根据具体情况选择合适的属性进行配置。

基本用法举例

Dismissible(
  key: Key(item.id.toString()), // 唯一标识，通常使用数据项的唯一标识
  onDismissed: (direction) {
    // 在用户滑动时调用，可以在这里执行删除等操作
    // direction 表示滑动的方向，是DismissDirection的枚举值之一
    // DismissDirection.horizontal 表示水平滑动
    // DismissDirection.vertical 表示垂直滑动
    // DismissDirection.endToStart 表示从右向左滑动（LTR语言环境）
    // DismissDirection.startToEnd 表示从左向右滑动（LTR语言环境）
    // DismissDirection.up 表示从下向上滑动
    // DismissDirection.down 表示从上向下滑动
  },
  background: Container(
    color: Colors.red, // 右滑或左滑时显示的背景颜色
    child: Icon(Icons.delete),
  ),
  child: ListTile(
    title: Text(item.title),
    // 其他列表项的内容
  ),
);

在这个例子中，Dismissible 包裹了一个 ListTile，表示列表中的一项。当用户滑动这个项时，onDismissed 回调会被触发，你可以在这里执行删除等操作。background 属性定义了右滑或左滑时显示的背景，可以包含图标、文字等。

注意事项

• key 是必需的，通常使用数据项的唯一标识。这是用来标识 Dismissible 的唯一性，以确保正确的删除和排序。
• 在 onDismissed 回调中，你需要执行具体的操作，例如从数据列表中删除对应的项。
• direction 参数表示滑动的方向，可以用于根据不同的方向执行不同的操作。
• background 属性定义了滑动时显示的背景，通常用来表示删除操作。
  总的来说，Dismissible 是一个非常实用的小部件，方便实现一些常见的滑动手势操作，特别适用于列表中的项。

---

结束语 Flutter是一个由Google开发的开源UI工具包，它可以让您在不同平台上创建高质量、美观的应用程序，而无需编写大量平台特定的代码。我将学习和深入研究Flutter的方方面面。从基础知识到高级技巧，从UI设计到性能优化，欢饮关注一起讨论学习，共同进入Flutter的精彩世界！