可滑动堆栈

用于堆叠卡片的小部件，用户可以水平和垂直滑动，并带有精美的动画。

swipable_stack

用法

builder

SwipableStack 使用构建器来显示小部件。

SwipableStack(
  builder: (context, index, constraints) {
    return Image.asset(imagePath);
  },
),

onSwipeCompleted

您可以通过 onSwipeCompleted 获取完成事件。

SwipableStack(
  onSwipeCompleted: (index, direction) {
    print('$index, $direction');
  },
)

overlayBuilder

您可以使用 overlayBuilder 在最前面的卡片上显示覆盖层。

SwipableStack(
  overlayBuilder: (
    context,
    constraints,
    index,
    direction,
    swipeProgress,
  ) {
    final opacity = min(swipeProgress, 1.0);
    final isRight = direction == SwipeDirection.right;
    return Opacity(
      opacity: isRight ? opacity : 0,
      child: CardLabel.right(),
    );
  },
)

控制器

SwipableStackController 允许您控制滑动操作和回退最近的操作。

final controller = SwipableStackController();

SwipableStack(
  controller:controller,
  builder: (context, index, constraints) {
    return Image.asset(imagePath);
  },
);
controller.next(
  swipeDirection: SwipeDirection.right,
);
controller.rewind();

SwipableStackController 提供访问 SwipableStack 的 currentIndex。

final controller = SwipableStackController();
controller.addListener(() {
  print('${_controller.currentIndex}');
});

onWillMoveNext

您还可以根据索引或操作使用 onWillMoveNext 限制用户操作。

SwipableStack(
  onWillMoveNext: (index, direction) {
    final allowedActions = [
      SwipeDirection.right,
      SwipeDirection.left,
    ];
    return allowedActions.contains(direction);
  },
);

swipeAssistDuration

您可以使用 swipeAssistDuration 设置用户通过小部件滑动的速度。

SwipableStack(
  swipeAssistDuration: Duration(milliseconds: 100),
)

默认值为 650 毫秒。

stackClipBehaviour

您可以使用 stackClipBehaviour 设置堆栈的 clipBehaviour。
将其更改为 Clip.none 以超出父级小部件的边界。

SwipableStack(
  stackClipBehaviour: Clip.none,
)

默认值为 Clip.hardEdge。

GitHub

https://github.com/HeavenOSK/flutter_swipable_stack