一个用于Flutter(Dart)的简单且大多自动化的Material搜索栏。

注意:请使用 flutter_search_bar 而不是 search_bar -- 我拥有这两个包,但我对 search_bar 的访问稍有限制,所以它不会被更新。

截图

正常状态(搜索尚未激活,仅设置了 `title` 和 `actions`,其中唯一的 action 是一个搜索按钮)

68747470733a2f2f66726f7a6f722e696f2f75702f306579744c48364d2e706e67

inBar 设置为 false(背景白色,后退按钮继承)

68747470733a2f2f66726f7a6f722e696f2f75702f4d64737757696f2e706e67

inBar 设置为 true(背景继承)

68747470733a2f2f66726f7a6f722e696f2f75702f4676454e4839412e706e67

用法

一个简单的使用示例

class _MyHomePageState extends State<MyHomePage> {
  SearchBar searchBar;
  
  AppBar buildAppBar(BuildContext context) {
    return new AppBar(
      title: new Text('My Home Page'),
      actions: [searchBar.getSearchAction(context)]
    );
  }  
  
  _MyHomePageState() {
    searchBar = new SearchBar(
      inBar: false,
      setState: setState,
      onSubmitted: print,
      buildDefaultAppBar: buildAppBar
    );
  }
  
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: searchBar.build(context)
    );
  }
}

这将创建一个 AppBar,其中搜索按钮是其唯一的 action,按下后 AppBar 会变成白色并包含一个 TextField,允许用户输入。一旦用户输入了内容并按下了键盘上的“回车”键,它就会关闭,并且该值将被打印到调试器。

SearchBar 与 Flutter 的 showSearch + SearchDelegate 对比

使用 SearchBar

本质上,这个类根据搜索是否活动返回两个不同的应用栏。最近构建的“默认”应用栏的颜色将用于为搜索栏着色。

我可能会将这两个不同的应用栏称为 **默认** 和 **搜索**。默认应用栏顾名思义,是默认的应用栏。它在您打开应用程序时显示,是“默认状态”。一旦其搜索按钮被按下,搜索应用栏就会出现,用户可以在其中输入内容并提交一个字段。

此文档可能略有过期。它将很快通过 dartdoc 生成,而不是手动编写(我不太确定为什么一开始不是这样)。

类型定义

AppBarCallback

typedef AppBar AppBarCallback(BuildContext context);

这应该接受 BuildContext 并返回一个 Appbar。

TextFieldSubmitCallback

typedef void TextFieldSubmitCallback(String value);

这应该接受输入字段的值,并且不返回任何内容。

SetStateCallback

typedef void SetStateCallback(fn);

这应该接受一个函数,并且不返回任何内容。通常,这应该就是 `setState`。更多信息请参见下文。

构造函数

bool inBar - 搜索是否应“在现有搜索栏中”进行,即它是否与 AppBar 具有相同的背景,还是具有翻转的(白色)背景(如果需要,还会带有彩色后退按钮)。默认为 true。

bool colorBackButton - 搜索栏中的后退按钮是否应着色,如果为 false,则为 `Colors.grey.shade400`。默认为 true。

bool closeOnSubmit - 提交搜索栏后是否应关闭。您可能应该保持此选项为 true,并且它默认也为 true。

String hintText - 按下搜索按钮时出现的 TextField 的提示文本。默认为 'Search'。

AppBarCallback buildDefaultAppBar - 每次构建 **默认** 应用栏时调用的函数。最近构建的 AppBar 的颜色将用于下一个 **搜索** 应用栏。

TextFieldSubmitCallback onSubmitted - 提交搜索栏时调用的 void 回调。

SetStateCallback setState - 每次需要更新 State 时(即 AppBar 更改时)都会调用此函数。您可以直接将 `setState` 传递给它,除非出于某种原因您希望在 AppBar 每次更改时执行其他操作。

属性

除了在构造函数中设置的所有上述属性之外

bool _isSearching - 搜索是否处于活动状态。

AppBar _defaultAppBar - 上一个构建的默认应用栏。

方法

getSearchAction

IconButton getSearchAction(BuildContext context)
这接受 `context` 作为参数,并返回一个适合在 AppBar 中作为 Action 的 IconButton。如果您希望您的 SearchBar 真正起作用,请将其放在您的 `buildDefaultAppBar` pub 方法中。

构建

AppBar build(BuildContext context)

这接受 `context` 作为参数,并根据搜索是否活动返回一个 AppBar。

GitHub

https://github.com/ArcticZeroo/flutter-search-bar