Flutter开发Todo应用：如何将IconButton动态替换为选中的Emoji并支持长按重选？

1. 补充页面状态 #

在持有showEmojiKeyboard、focusNode变量的State类中，新增存储选中emoji的状态：

String? selectedEmoji;

• 初始值为null，对应按钮显示默认的CarbonIcons.face_add图标
• 用户选中emoji后更新该值，按钮自动切换为显示对应emoji文本

2. 调整Emoji选择回调逻辑 #

修改emojiSelect()方法中的onEmojiSelected回调，选中emoji后同步更新状态、关闭选择面板、恢复输入框焦点能力：

Widget emojiSelect() {
  return EmojiPicker(
      numRecommended: 25,
      recommendKeywords: ["sing", "coding"],
      columns: 7,
      rows: 3,
      onEmojiSelected: (emoji, catergory) {
        setState(() {
          selectedEmoji = emoji;
          showEmojiKeyboard = false;
          focusNode.canRequestFocus = true;
        });
      });
}

3. 改造原有的Emoji唤起按钮 #

替换原有IconButton的实现，支持动态切换显示内容、长按唤起选择面板：

IconButton(
  // 动态切换按钮显示内容
  icon: selectedEmoji != null 
    ? Text(selectedEmoji!, style: TextStyle(fontSize: 24)) 
    : Icon(CarbonIcons.face_add),
  // 无选中emoji时，点击执行原有唤起键盘逻辑
  onPressed: selectedEmoji == null ? () {
    setState(() {
      focusNode.unfocus();
      focusNode.canRequestFocus = false;
      showEmojiKeyboard = !showEmojiKeyboard;
    });
  } : null,
  // 有选中emoji时，长按触发重新唤起选择面板逻辑
  onLongPress: selectedEmoji != null ? () {
    setState(() {
      focusNode.unfocus();
      focusNode.canRequestFocus = false;
      showEmojiKeyboard = true;
    });
  } : null,
  color: Colors.black54,
)

效果匹配说明 #

• 首次进入时按钮显示默认图标，点击唤起Emoji选择面板，和原有逻辑保持一致
• 选中任意Emoji后面板自动收起，按钮实时切换为选中的Emoji文本
• 显示选中Emoji的按钮支持长按，长按后重新弹出Emoji选择面板，可切换其他Emoji
• 原有返回键拦截逻辑不需要改动，WillPopScope的逻辑会正常处理面板关闭、页面返回的场景

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