将图标移动到 TextField `leading` 图标中

Question

正如你在图片中看到的，当我们按下搜索图标时，我希望图标传递到文本字段中。

基本上，当我按下搜索图标时，我希望该图标消失在文本字段中。谢谢你的帮助。

Before

After

return Scaffold(
  appBar: AppBar(
    backgroundColor: it_tool_main_grey_accent,
    elevation: 0,
    title: !isSearching
        ? Text('All')
        : TextField(
            decoration: InputDecoration(
                enabledBorder: const OutlineInputBorder(
                  borderSide:
                       BorderSide(color: Colors.black, width: 1.0),
                ),
                hintText: "Search"),
          ),
    automaticallyImplyLeading: false,
    leadingWidth: 55,
    leading: Padding(
      padding:
          EdgeInsets.only(left: MediaQuery.of(context).size.width / 30),
      child: DecoratedBox(
        decoration:
            BoxDecoration(shape: BoxShape.circle, color: Colors.white),
        child: IconButton(
          icon: customIcon,
          onPressed: () {
            setState(() {
              isSearching = !isSearching;
            });
          },
        ),
      ),
    ),
    
  ),
  body: Text("hi"),
);

Answer 1

您只需进行以下更改，就可以借助 isSearching 获得您想要的结果

Scaffold(
      appBar: AppBar(
        // backgroundColor: it_tool_main_grey_accent,
        elevation: 0,
        title: !isSearching
            ? Text('All')
            : Padding(
              padding: const EdgeInsets.symmetric(vertical: 8.0),
              child: SizedBox(
                height: 40,
                child: TextField(
                    decoration: InputDecoration(
                      filled: true,
                        contentPadding: EdgeInsets.all(8),
                        fillColor: Colors.white,
                        enabledBorder: OutlineInputBorder(
                          borderSide: BorderSide.none,borderRadius: BorderRadius.circular(10)
                        ),
                        prefixIcon: Icon(
                          Icons.search,
                          color: Colors.black,
                        ),
                        hintText: "Search"),
                  ),
              ),
            ),
        automaticallyImplyLeading: false,
        leadingWidth: 55,
        leading: isSearching
            ? null
            : Padding(
                padding: EdgeInsets.only(
                    left: MediaQuery.of(context).size.width / 30),
                child: DecoratedBox(
                  decoration: BoxDecoration(
                      shape: BoxShape.circle, color: Colors.white),
                  child: IconButton(
                    icon: Icon(Icons.search,color: Colors.black),
                    onPressed: () {
                      setState(() {
                        isSearching = !isSearching;
                      });
                    },
                  ),
                ),
              ),
      ),
      body: Text("hi"),
    )

到

将图标移动到 TextField `leading` 图标中

Moving an icon into a TextField `leading` icon

icons

input

textfield

dart

flutter