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

Question

我想实现一个像下面这样有一个文本框和多个图标的 Appbar：

图标可以很容易地添加到操作中，但如何添加文本框并向其添加搜索操作。有很多搜索栏插件可用，但都占据了整个应用栏，没办法提提示。任何人都可以提供一些想法，这对我有很大帮助。

Answer 1

在标题属性中，在 AppBar 中，您可以传递一个小部件，这意味着您可以添加任何您想要的组件，例如 TextField。看下面的例子：

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

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

要调用 this showSearch()，您需要传递 acontext和 a 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;
  }
}

来源：在 Flutter 中实现搜索

现在，您可以这样做：

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