如何使用图标按钮将应用栏文本更改为 flutter 中的 TextField？

Question

我正在制作一个应用程序来搜索 firebase 上的课程。应用程序栏显示一个文本：“主页”，并且在屏幕的右侧有一个搜索按钮：

我现在想从应用程序栏中隐藏“主页”文本以单击搜索按钮，并显示用于键入查询的字段。

这是我的代码，我不知道如何实现。

appBar: AppBar(
    title: Text(
      "Home",
      style: TextStyle(
        fontSize: 16.0, /*fontWeight: FontWeight.bold*/
      ),
    ),
    centerTitle: true,

 //search icon
 actions: [
  IconButton(
    icon: Icon(Icons.search),
    onPressed: () {
      //i want to change the text of the app bar:"Home" to a TextField to type
      AppBar(
        title: TextField(
          style: TextStyle(color: Colors.white),
          decoration: InputDecoration(
              hintText: 'Search Courses',
              hintStyle: TextStyle(color: Colors.white)),
          controller: searchController,
        ),
      );
    },
  ),
],

),

Answer 1

您可以使用 boolean 变量来判断是否正在搜索。

bool isSearching = false;

appBar: AppBar(
    title: isSearching ? TextField(
          style: TextStyle(color: Colors.white),
          decoration: InputDecoration(
              hintText: 'Search Courses',
              hintStyle: TextStyle(color: Colors.white)),
          controller: searchController,
) 

     : Text(
      "Home",
      style: TextStyle(
        fontSize: 16.0, /*fontWeight: FontWeight.bold*/
      ),
    ),
    centerTitle: true,

 //search icon
 actions: [
  IconButton(
    icon: Icon(Icons.search),
    onPressed: () {
      setState((){
        isSearching = true;
      });
    },
  ),
],

),

Answer 2

我想你想要这样的东西：

  bool _showSearch=false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: _showSearch? TextField(
          controller: searchController,
          style: const TextStyle(color: Colors.white),
          decoration: const InputDecoration(
              hintText: 'Search Courses',
              hintStyle: TextStyle(color: Colors.white)),
        ):const Text(
          "Home",
          style: TextStyle(
            fontSize: 16.0, /*fontWeight: FontWeight.bold*/
          ),
        ),
        centerTitle: true,

        //search icon
        actions: [
          IconButton(
            icon: const Icon(Icons.search),
            onPressed: () {
              setState(() {
                _showSearch=!_showSearch;
              });
            },
          ),
        ],
      ),
    );
  }