Flutter中如何让InkWell仅在双击时显示高亮/波纹效果？

要实现仅双击评论（点赞）时显示Ink高亮效果，而单击无高亮，可以通过手动控制Ink响应的高亮触发来实现，因为默认InkWell的高亮是绑定到单击手势的。以下是具体实现方案：

实现步骤 #

使用GestureDetector处理双击事件，配合InkResponse（替代默认InkWell）手动触发高亮效果：

class CommentCard extends StatefulWidget {
  final String commentContent;
  final VoidCallback onLike;

  const CommentCard({
    super.key,
    required this.commentContent,
    required this.onLike,
  });

  @override
  State<CommentCard> createState() => _CommentCardState();
}

class _CommentCardState extends State<CommentCard> {
  final GlobalKey _inkKey = GlobalKey();

  // 手动触发Ink高亮
  void _triggerHighlight() {
    final inkContext = _inkKey.currentContext;
    if (inkContext == null) return;

    final inkResponse = InkResponse.maybeOf(inkContext);
    inkResponse?.highlight?.show(
      duration: const Duration(milliseconds: 300), // 高亮持续时间
      onRemoved: () {},
    );
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      // 双击时触发点赞和高亮
      onDoubleTap: () {
        _triggerHighlight();
        widget.onLike();
      },
      child: InkResponse(
        key: _inkKey,
        highlightColor: Theme.of(context).primaryColor.withOpacity(0.2), // 高亮颜色
        borderRadius: BorderRadius.circular(8), // 高亮圆角，匹配卡片布局
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
          child: Text(widget.commentContent),
        ),
      ),
    );
  }
}

关键说明 #

1. GestureDetector处理双击：替代InkWell的onDoubleTap，完全控制触发逻辑，避免默认单击高亮的干扰。
2. 手动触发Ink高亮：通过GlobalKey获取InkResponse的上下文，调用highlight.show()主动显示高亮效果。
3. 自定义高亮样式：通过highlightColor设置高亮颜色，borderRadius保证高亮形状和卡片布局一致。
4. ListView中使用注意：确保每个CommentCard的key唯一（比如使用ValueKey(commentId)），避免状态复用导致的异常。

另一种简化方案（使用InkWell） #

如果坚持使用InkWell，可以禁用onTap回调，并通过GestureDetector包裹，同样手动触发高亮：

class CommentCard extends StatefulWidget {
  // ... 同上参数 ...

  @override
  State<CommentCard> createState() => _CommentCardState();
}

class _CommentCardState extends State<CommentCard> {
  final GlobalKey _inkWellKey = GlobalKey();

  void _triggerHighlight() {
    final renderBox = _inkWellKey.currentContext?.findRenderObject() as RenderBox?;
    if (renderBox == null) return;

    final inkWell = InkWell.maybeOf(_inkWellKey.currentContext!);
    inkWell?.highlight?.show(
      duration: const Duration(milliseconds: 300),
      onRemoved: () {},
    );
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onDoubleTap: () {
        _triggerHighlight();
        widget.onLike();
      },
      child: InkWell(
        key: _inkWellKey,
        onTap: () {}, // 空实现禁用默认单击高亮
        highlightColor: Theme.of(context).primaryColor.withOpacity(0.2),
        borderRadius: BorderRadius.circular(8),
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
          child: Text(widget.commentContent),
        ),
      ),
    );
  }
}

这种方案需要给onTap设置空实现，避免默认单击手势触发高亮，同时通过GestureDetector处理双击逻辑并手动触发高亮。

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