如何在Flutter中通过TextField实现搜索页面？

Question

我需要做一个搜索页面。通过 TextField 创建一个字段，单击该字段应打开搜索页面。告诉我如何实现单击 TextField，使后退按钮出现在左侧，按钮在右侧消失？

代码

TextFormField(
                style: constants.Styles.textFieldTextStyleWhite,
                cursorColor: Colors.white,
                decoration: InputDecoration(
                    contentPadding: const EdgeInsets.only(
                      top: 15, // HERE THE IMPORTANT PART
                    ),
                    border: InputBorder.none,
                    prefixIcon: Align(
                        alignment: Alignment.centerLeft,
                        child: SvgPicture.asset(
                          constants.Assets.search,
                          width: 20,
                          height: 20,
                        ))),
              )

正常状态

点击线后

Answer 1

将所有内容包装成 StatefulWidget。

然后，点击TextFormField，改变StatefulWidget的属性。

class YourPage extends StatefulWidget {
  _YourPageState createState() => _YourPageState();
}

class _YourPageState extends State<YourPage> {

  var myBool = false;
  
  // Initialize your Row-buttons here
  // ...

  void changeRow(){
    setState(() {
 
     // Hide or show Row-buttons here.   

     myBool = true;

    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
       child: Scaffold(
         body: Row(children:[

             myBool == true 
               ? Icon( ...)         // shows icon
               : SizedBox.shrink(), // shows nothing

             TextFormField( onTap: () => changeRow() ),

             // other BUTTONs here
         ])
       ),
    );
  }
}

AppBar 有几种显示文本或按钮的可能性。

检查这些示例：

https://www.fluttercampus.com/tutorial/10/flutter-appbar/

如何在Flutter中通过TextField实现搜索页面？

How to implement search page via TextField in Flutter?

dart

flutter