Flutter Web中GestureDetector的onTap在build时被立即触发问题

你遇到的问题核心在于给GestureDetector的onTap赋值时，直接执行了_emojiTapped("$emoji")函数，而非传入一个点击触发的回调。onTap要求接收VoidCallback类型（无参无返回值的函数），当前写法会导致build阶段就立刻调用_emojiTapped，而非等待点击事件触发。

解决方法 #

只需用匿名函数包裹_emojiTapped调用，确保只有点击时才执行该方法：

children.add(GestureDetector(
  child: Text(
    emoji,
    style: TextStyle(
      decoration: TextDecoration.none,
      fontSize: 36,
      fontFamily: Emoji.getFontNameForPlatform(),
    ),
  ),
  onTap: () => _emojiTapped(emoji), // 改为匿名函数包裹
));

修改后的完整代码示例 #

class EmojiKeyboard extends StatefulWidget {
  EmojiKeyboard();

  @override
  State<StatefulWidget> createState() => _EmojiKeyboardState();
}

class _EmojiKeyboardState extends State<EmojiKeyboard> {
  @override
  void initState() {
    super.initState();
  }

  void _emojiTapped(String emoji) {
    print(emoji);
  }

  @override
  Widget build(BuildContext context) {
    // 实际代码从模型加载表情列表，此处仅做示例
    List<String> listEmoji = ["😀", "😃", "😄", "😁", "😆", "😅"];
    List<Column> columns = [];
    List<Widget> children = [];

    for (int i = 0; i < listEmoji.length; i++) {
      var emoji = listEmoji[i];

      children.add(GestureDetector(
        child: Text(
          emoji,
          style: TextStyle(
            decoration: TextDecoration.none,
            fontSize: 36,
            fontFamily: Emoji.getFontNameForPlatform(),
          ),
        ),
        onTap: () => _emojiTapped(emoji),
      ));

      // 修正分组逻辑，避免第一个元素就创建列
      if ((i + 1) % 4 == 0) {
        columns.add(Column(children: children));
        children = [];
      }
    }

    // 处理最后一组不满4个的表情，避免遗漏
    if (children.isNotEmpty) {
      columns.add(Column(children: children));
    }

    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Row(children: columns),
    );
  }
}

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