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

x6492ojm  于 2023-03-09  发布在  Flutter
关注(0)|答案(1)|浏览(250)

我需要做一个搜索页面。通过文本字段的方式在点击搜索页面应该打开的字段。告诉我如何实现点击文本字段,使返回按钮出现在左边,按钮消失在右边?

    • 代码**
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,
                        ))),
              )
elcex8rz

elcex8rz1#

把所有东西都包成一个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/

相关问题