将应用栏中的搜索按钮颤动到一个新页面，其中选项栏项目作为选项

Question

我只是将一个Android的应用传递给Flutter，目前的问题如下：在 Android 我有一个带有搜索按钮的片段，当点击搜索按钮时，会显示一个带有选项卡布局的新片段，用户可以在其中按标题或用户名搜索书籍，方面显示在下一张图片：

在新片段中，用户可以选择搜索方式，并可以预览匹配结果。

在 Flutter 中实现这样的东西最好的方法是什么，我理解的开头是这样的：

return Scaffold(
    body: Column(
      children: <Widget>[
        // Page Content 
      ],
    ),
    appBar: AppBar(
      title: Text(this.text),
      actions: <Widget>[
        IconButton(
          onPressed: () {},
          icon: Icon(Icons.search)
        )
      ],
    ),
);

但是我应该如何实现标签栏来选择搜索方式和应用栏中要聚焦的搜索输入文本。

Answer 1

return Scaffold(
    body: Column(
      children: <Widget>[
        // Page Content 
      ],
    ),
    appBar: AppBar(
      title: Text(this.text),
      bottom: TabBar(
        tabs: [Text("Books"), Text("Users")],
      ),
      actions: <Widget>[
        IconButton(
          onPressed: () {},
          icon: Icon(Icons.search)
        )
      ],
    ),
);

Answer 2

添加这个onPressed函数

onPressed: () {
            Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondScreen()),
  );
          },

现在创建一个新状态class

return Scaffold(
    appBar: AppBar(
      title: TextField(),
      bottom: TabBar(
        tabs: [Text("Books"), Text("Users")],
      ),
      actions: <Widget>[
        IconButton(
          onPressed: () {},
          icon: Icon(Icons.search)
        )
      ],
    ),
));

将应用栏中的搜索按钮颤动到一个新页面，其中选项栏项目作为选项

Flutter Search Button in app bar to a new page with TabBar items as option

search

tabbar

flutter