flutter - 如何将图标按钮动态更改为字符串或表情符号

Question

所以我正在制作一个 Todo 应用程序，其中包含一个 Emoji 作品。我目前正在使用 PubPackage，emoji_picker: ^0.1.0 在它的帮助下，我可以轻松打开和关闭表情符号键盘。

顺便说一句，您看到的代码是打开EmojiKeyboard的代码。

 Widget emojiSelect() {
  return EmojiPicker(
      numRecommended: 25,
      recommendKeywords: ["sing", "coding"],
      columns: 7,
      rows: 3,
      onEmojiSelected: (emoji, catergory) {
        print(emoji);
      });
}

在这里，当我按下按钮时，表情符号键盘正在完美打开，我对此非常满意。

现在，我想做点什么，比如如果我们点击位于 Emoji_keyboard 中的其中一个表情符号，然后点击图标，如下图所示(在下图中)

用户通过键盘点击的表情符号的变化。

有没有办法，将图标自身更改为用户单击的“表情符号”，如果我们长按同一个按钮，我们可以再次编辑表情符号以根据我们的选择选择另一个？

整个代码，大致是这样的，

return Wrap(
      children: [
        WillPopScope(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Wrap(
                //height: MediaQuery.of(context).size.height / 4.8,
                children: [
                  Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      TextFormField(
                        focusNode: focusNode,
                        autofocus: false,
                        autocorrect: true,
                        decoration: InputDecoration(
                          hoverColor: Colors.amber,
                          border: InputBorder.none,
                          prefixIcon: Icon(CarbonIcons.pen_fountain),
                          hintText: "What toodo?",
                          hintStyle: TextStyle(
                              color: Colors.black54,
                              fontWeight: FontWeight.w200),
                          contentPadding: EdgeInsets.all(20.0),
                        ),
                      ),
                      // TextFormField(
                      //   autocorrect: true,
                      //   decoration: InputDecoration(
                      //     hoverColor: Colors.amber,
                      //     border: InputBorder.none,
                      //     prefixIcon: Icon(CarbonIcons.pen),
                      //     hintText: "Description (optional)",
                      //     hintStyle: TextStyle(
                      //         color: Colors.black54,
                      //         fontWeight: FontWeight.w200),
                      //     contentPadding: EdgeInsets.all(20.0),
                      //   ),
                      // ),
                      Row(
                        children: [
                          Row(
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: [
                              IconButton(
                                icon: Icon(CarbonIcons.notification),
                                onPressed: () async {
                                  final TimeOfDay newTime =
                                      await showTimePicker(
                                    context: context,
                                    initialTime:
                                        TimeOfDay(hour: 7, minute: 15),
                                  );
                                },
                                color: Colors.black54,
                              ),
                              IconButton(
                                icon: Icon(CarbonIcons.face_add),
                                onPressed: () {
                                  setState(() {
                                    focusNode.unfocus();
                                    focusNode.canRequestFocus = false;
                                    showEmojiKeyboard = !showEmojiKeyboard;
                                  });
                                },
                                color: Colors.black54,
                              )
                            ],
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: [
                              FlatButton.icon(
                                  onPressed: () {},
                                  color: Colors.blue,
                                  icon: Icon(
                                    CarbonIcons.add,
                                    color: Colors.white,
                                  ),
                                  label: Text(
                                    "Add Todo",
                                    style: TextStyle(color: Colors.white),
                                  ))
                            ],
                          ),
                          Divider(),
                        ],
                      )
                    ],
                  ),
                ],
              ),
              showEmojiKeyboard ? emojiSelect() : Container(),
            ],
          ),
          onWillPop: () {
            if (showEmojiKeyboard) {
              setState(() {
                showEmojiKeyboard = false;
              });
            } else {
              Navigator.pop(context);
            }
            return Future.value(false);
          },
        ),
      ],
    );

Answer 1

似乎所选的表情符号类型是字符串，所以基本上在选择表情符号时，您需要显示一个文本小部件来代替图标。

String selectedEmoji;


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

并且显示图标的地方必须有条件地用 Text() 小部件替换

 IconButton(
   icon: selectedEmoji==null? Icon(CarbonIcons.face_add):Text(selectedEmoji),
   onPressed: () {
     setState(() {
     focusNode.unfocus();
     focusNode.canRequestFocus = false;
     showEmojiKeyboard = !showEmojiKeyboard;
   });
 },
 color: Colors.black54,
)