将文本框放在Flutter中的应用栏中

Question

我想实现一个如下所示的Appbar，其中有一个文本框和多个图标：

可以轻松地将图标添加到操作中，但是如何添加文本框和向其中添加搜索操作。有很多可用的搜索栏插件，但是它们全部占据了整个应用栏，没有办法提及提示。任何人都可以提出想法，这将对我有很大的帮助。

Answer 1

在标题栏中，可以在AppBar中传递小部件，这意味着您可以添加所需的任何组件，例如TextField。参见下面的示例：

appBar: AppBar(
        title: TextField(
          decoration: InputDecoration(
            hintText: 'Search',
            prefixIcon: Icon(Icons.search)
          ),
        ),
      ),

我建议您将此TextField包裹在GestureDetector中，禁用具有属性enable（设置为false）的TextField，并在GestureDetector内部的onTap方法中，可以调用showSearch()方法。

要调用此showSearch()，您需要传递一个context和一个searchDelegate（这是扩展类的组件），请检查以下示例：

class CustomSearchDelegate extends SearchDelegate {
  @override
  List<Widget> buildActions(BuildContext context) {
    // TODO: implement buildActions
    return null;
  }

  @override
  Widget buildLeading(BuildContext context) {
    // TODO: implement buildLeading
    return null;
  }

  @override
  Widget buildResults(BuildContext context) {
    // TODO: implement buildResults
    return null;
  }

  @override
  Widget buildSuggestions(BuildContext context) {
    // TODO: implement buildSuggestions
    return null;
  }
}

来源：Implementing search in Flutter

现在，您可以执行以下操作：

GestureDetector:
  onTap: () => showSearch(context: context, delegate: CustomSearchScreen()),
  child: ....