📜  Flutter – 实现滑动关闭功能(1)

📅  最后修改于: 2023-12-03 15:00:48.485000             🧑  作者: Mango

Flutter - 实现滑动关闭功能

在 Flutter 中,我们经常需要为用户提供一种手势操作来关闭某个界面或者某个特定的 widget。这个功能在 Flutter 中被称为滑动关闭功能(Swipe to Dismiss)。Flutter 内置了一个 widget 来实现这个功能,也可以自定义滑动关闭效果。

使用 Dismissible 实现滑动关闭

在 Flutter 中,我们可以使用 Dismissible widget 来实现滑动关闭功能。Dismissible 继承自 StatefulWidget,可以管理自身的状态,在状态改变时重新构建自身。Dismissible 会将它的 child widget 嵌套在一个 GestureDetector 中,并通过 GestureDetector 监听手势事件,根据手势处理结果来决定如何呈现 child widget。

Dismissible widget 需要以下参数:

  • key: Widget 的唯一标识符。
  • child: 要滑动关闭的 Widget。
  • background: 当 child widget 被滑动时,在 child widget 后面呈现的 Widget。
  • secondaryBackground: 当 child widget 被从反方向开始滑动时,在 child widget 后面呈现的 Widget。
  • onDismissed: 当 child widget 被滑动并消失时的回调函数。
  • direction: 控制 Dismissible 的方向,默认为 DismissDirection.horizontal。
  • resizeDuration: 调整 child widget 大小的动画时间。
  • dismissThresholds: Dismissible 滑动的阈值,支持指定 DismissDirection 的不同阈值。

以下为一个例子:

Widget _buildListItem(BuildContext context, String item) {
  return Dismissible(
    key: Key(item),
    child: ListTile(
      title: Text(item),
    ),
    background: Container(
      color: Colors.red,
      child: Icon(Icons.delete),
    ),
    secondaryBackground: Container(
      color: Colors.green,
      child: Icon(Icons.archive),
    ),
    onDismissed: (direction) {
      if (direction == DismissDirection.endToStart) {
        // 左滑删除
      } else {
        // 右滑归档
      }
    },
  );
}

上面的例子演示了一个列表项(ListTile)的滑动关闭功能,如果向左滑动,调用左滑删除的方法,如果向右滑动,调用右滑归档的方法。

自定义滑动关闭效果

如果你想要更加自由、灵活地控制滑动关闭效果,可以使用 GestureDetector、Animation 和 Transform 组合来实现。这种方式需要自己写代码实现各个阶段的动画效果。

我们可以监听 GestureDetector 的 onPanStart、onPanUpdate 和 onPanEnd 事件,这个事件可以获取到手指在屏幕上的滑动状态和滑动距离。然后通过 Animation 和 Transform 调整 Widget 的位置和大小来实现复杂的滑动动画效果。

具体实现方式可以参考 flutter_slidable 这个第三方库,它提供了丰富的滑动关闭效果。