如何为Flutter的Dismissible组件添加点击弹跳效果提示用户滑动操作

Dismissible本身未提供点击弹跳的内置配置，通过叠加点击检测+平移动画的方式即可实现需求，具体实现如下：

1. 首先在列表项对应的State类中混入动画支持，声明并初始化动画控制器与动画对象
2. 将原Dismissible的子组件包裹在GestureDetector与SlideTransition中，点击时触发弹跳动画

完整代码示例：

class _YourListItemState extends State<YourListItem> with SingleTickerProviderStateMixin {
  late AnimationController _bounceController;
  late Animation<Offset> _bounceAnimation;

  @override
  void initState() {
    super.initState();
    // 动画总时长可根据UX要求调整
    _bounceController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 250),
    );
    // begin的x轴偏移值控制弹跳幅度，数值越大幅度越大
    _bounceAnimation = Tween<Offset>(begin: const Offset(0.02, 0), end: Offset.zero)
        .chain(CurveTween(curve: Curves.bounceInOut))
        .animate(_bounceController);
  }

  @override
  void dispose() {
    _bounceController.dispose();
    super.dispose();
  }

  void _triggerBounce() async {
    await _bounceController.forward();
    await _bounceController.reverse();
  }

  @override
  Widget build(BuildContext context) {
    return Dismissible(
      key: const ValueKey(0),
      direction: DismissDirection.horizontal,
      child: GestureDetector(
        onTap: _triggerBounce,
        child: SlideTransition(
          position: _bounceAnimation,
          child: Container(
            margin: const EdgeInsets.symmetric(horizontal: 3, vertical: 3),
            child: card(),
          ),
        ),
      ),
      confirmDismiss: (direction) async {
        var newStatus = direction == DismissDirection.startToEnd
            ? OkNokNvt.OK
            : OkNokNvt.NOK;
        _changeStatus(newStatus);
        return false;
      },
      background: ok(),
      secondaryBackground: nok(),
    );
  }
}

可调整的参数说明：

• 调整AnimationController的duration参数可以改变弹跳的快慢
• 调整Tween的begin偏移量可以改变弹跳的幅度
• 替换CurveTween的curve参数可以调整弹跳的动效质感，可选Curves.elasticIn、Curves.bounceOut等内置曲线

内容的提问来源于stack exchange，提问作者Kiwi