如何长按点赞按钮时触发flutter_reaction_button的ReactionButton弹窗弹出

核心问题说明 #

你当前的实现逻辑存在两个核心问题：

1. 你是在长按触发后才将ReactionButton渲染到视图中，此时首次长按事件已经被外层GestureDetector消费，新渲染的ReactionButton没有接收到长按事件，需要再次长按才能触发选择框弹出
2. 你在onTap回调中写的是_isLiked == true，这是判断语句而非赋值语句，点击切换点赞状态的逻辑本身是无效的

解决方案 #

flutter_reaction_button库的ReactionButton本身已经内置了长按触发选择框、普通点击响应的能力，不需要额外套GestureDetector，也不需要动态切换子组件，直接按以下方式调整即可：

调整后你不需要再保留_isSelected变量和_showEmojiReaction方法，直接在视图层写如下代码：

ReactionButton<String>(
  onReactionChanged: (String? value) {
    // 这里处理选中表情后的逻辑，比如替换点赞状态为对应表情
    if (value != null) {
      setState(() {
        _isLiked = true;
        // 可自行扩展变量存储选中的表情，用于后续展示
      });
    }
  },
  // 普通点击事件，处理常规点赞切换逻辑
  onTap: () {
    setState(() {
      _isLiked = !_isLiked;
    });
  },
  reactions: Provider.of<PostsProvider>(context, listen: false).emojisList,
  // 初始展示的图标根据_isLiked动态切换，不需要单独封装FaIcon
  initialReaction: Reaction<String>(
    value: null,
    icon: FaIcon(
      _isLiked
          ? FontAwesomeIcons.solidThumbsUp
          : FontAwesomeIcons.thumbsUp,
      size: 20,
    ),
  ),
  boxElevation: 10,
  boxPosition: Position.TOP,
  boxPadding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 13.0),
  itemScale: 0.5,
  boxColor: Colors.white,
  boxRadius: 10,
  boxDuration: const Duration(milliseconds: 100),
  itemScaleDuration: const Duration(milliseconds: 100),
)

调整后组件默认会展示你需要的点赞图标，普通点击会切换点赞状态，长按会直接弹出表情选择框，完全符合需求。

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