如何使清除图标始终出现在 Flutter 搜索栏中

Question

我的 Flutter 项目中有一个这样的搜索栏，它工作正常，但我只是想知道如何保留 X 图标，即使用户在他们的键盘上点击“Enter”或当他们点击外面的屏幕时搜索栏的？

目前只有当用户点击搜索栏时才会显示 X 图标。基本上，只要搜索栏上有用户文本，我就希望 X 图标出现。

只要搜索栏为空，搜索图标就会重新出现。

如有任何建议或帮助，我们将不胜感激。

           Row(  
                children: [
                  Expanded(
                      child: Container(                       
                        padding: EdgeInsets.only(left: 20, right: 20),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Expanded(
                              child: Container(
                                margin: EdgeInsets.only(bottom: 6),
                                child: TextFormField(
                                    focusNode: _focusNode,
                                    style: TextStyle(
                                        fontSize: 16,
                                        color: Colors.black
                                        height: 1,
                                        fontWeight: FontWeight.w100),
                                    decoration: InputDecoration(
                                        hintStyle: TextStyle(
                                            color: Colors.black
                                            fontSize: 16,
                                            height: 1,
                                            fontWeight: FontWeight.w100),
                                        border: InputBorder.none,
                                        hintText: "Search"),
                                    onChanged: (text) {
                                      loadData();
                                    },
                                    controller: search),
                              ),
                            ),
                            focused.value == true
                                ? GestureDetector(
                                    onTap: () {
                                      search.clear();
                                      FocusScope.of(context).requestFocus(
                                          new FocusNode()); //remove focus
                                      focused.value = false;
                                      (context as Element).markNeedsBuild();
                                    },
                                    child: SvgPicture.asset(
                                      iconsPath + "close.svg",
                                      color: Colors.black
                                      width: 20,
                                    ),
                                  )
                                : loading.value
                                    ? SpinKitFadingCube(
                                        color: Colors.blue
                                        size: 16.0,
                                      )
                                    : SvgPicture.asset(
                                        iconsPath + "search.svg",
                                        color:  Colors.black
                                        width: 20,
                                      )
                          ],
                        ),
                      ),
           
                  ),
                ],
              ),
          

Answer 1

使用 TextEditingController 作为复选图标：

尝试：

          Row(
            children: [
              Expanded(
                child: Container(
                  padding: EdgeInsets.only(left: 20, right: 20),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Expanded(
                        child: Container(
                          margin: const EdgeInsets.only(bottom: 6),
                          child: TextFormField(
                              focusNode: _focusNode,
                              style: const TextStyle(
                                  fontSize: 16,
                                  color: Colors.black,
                                  height: 1,
                                  fontWeight: FontWeight.w100),
                              decoration: const InputDecoration(
                                  hintStyle: TextStyle(
                                      color: Colors.black,
                                      fontSize: 16,
                                      height: 1,
                                      fontWeight: FontWeight.w100),
                                  border: InputBorder.none,
                                  hintText: "Search"),
                              onChanged: (text) {
                                setState(() {
                                  // loadData();
                                });
                              },
                              controller: search),
                        ),
                      ),
                      search.text.isNotEmpty
                          ? GestureDetector(
                              onTap: () {
                                search.clear();
                                FocusScope.of(context).requestFocus(
                                    new FocusNode()); //remove focus
                                // _focusNode.hasFocus = false;
                                (context as Element).markNeedsBuild();
                              },
                              child: Icon(CupertinoIcons.clear),
                            )
                          : Icon(CupertinoIcons.search)
                    ],
                  ),
                ),
              ),
            ],
          ),

Answer 2

在您当前的实现中，您使用了“focused.value”，而是尝试将 texteditingcontroller 添加到 Textformfield 并检查其值长度。