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

Question

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

图标可以很容易地添加到操作中，但是如何添加文本框并向其中添加搜索操作。有很多搜索栏插件可用，但它们都占据了整个应用程序栏，更不用说提示了。谁能给个主意，对我有很大的帮助。

Answer 1

在标题属性中，在AppBar里面，你可以传递一个widget，这意味着你可以添加任何你想要的组件，比如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 的组件，检查此示例：

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: ....

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

Place text box in appbar in Flutter

search

appbar

flutter