顫振：當 textField 失去焦點時，為什么輸入內容會消失？

Question

我在Container放置了一個帶有clear button和hintText的textField 。 我的希望是當textField獲得焦點時，會出現clear button ，而失去焦點時，按鈕會消失。 但是當我收起鍵盤時（ textField失去焦點），輸入內容和hintText消失了。 那么怎么了？

Container(
                      width: 330,
                      height: 40,
                      alignment: Alignment.centerLeft,
                      child: TextField(
                        controller: inputController,
                        focusNode: focusNode,
                        style: MyTextStyle.level9,
                        keyboardType: TextInputType.number,
                        decoration: InputDecoration(
                          hintText: 'hint text',
                          hintStyle: MyTextStyle.grey,
                          border: InputBorder.none,
                          suffixIcon: focusNode.hasFocus ? IconButton(
                            icon: MyIcon.CloseIcon,
                            onPressed: () {
                              inputController.clear();
                            }
                          ) : Container(),
                          filled: true,
                        ),
                      ),
                      decoration: BoxDecoration(
                        color: MyColor.MidGray,
                      ),
                    ),

Answer 1

您用於suffixIcon的Container小部件占用了所有可用空間，使用SizedBox小部件運行良好並產生預期的行為。

我使用您的代碼添加了一個示例：

Container(
        width: 330,
        height: 40,
        alignment: Alignment.centerLeft,
        child: TextField(
          controller: inputController,
          focusNode: focusNode,
          style: MyTextStyle.level9,
          keyboardType: TextInputType.number,
          decoration: InputDecoration(
            hintText: 'hint text',
            hintStyle: MyTextStyle.grey,
            border: InputBorder.none,
            suffixIcon: focusNode.hasFocus
                ? IconButton(
                    icon: MyIcon.CloseIcon,
                    onPressed: () {
                      inputController.clear();
                    })
                // use a SizedBox widget instead
                : SizedBox.shrink(),
            filled: true,
          ),
        ),
        decoration: BoxDecoration(
          color: MyColor.MidGray,
        ),
      ),