加载器搜索栏

Flutter 小部件将搜索字段功能集成到应用栏中，允许接收查询更改回调并自动加载新数据到 ListView。它取代了标准的 AppBar 小部件，并且为了正常工作，需要将其放置在 Scaffold 元素的下方。

Loader-SearchBar

入门

要开始使用 SearchBar，请将其插入 Scaffold 小部件的 AppBar 元素位置。无论使用哪种情况，都必须指定 **defaultBar** 命名参数，该参数基本上是一个在 SearchBar 未激活状态下显示的小部件。

@override
Widget build(BuildContext context) {
   return Scaffold(
     appBar: SearchBar(
       defaultBar: AppBar(
         leading: IconButton(
           icon: Icon(Icons.menu),
           onPressed: _openDrawer,
         ),
         title: Text('Default app bar title'),
       ),
       ...
     ),
     body: _body,
     drawer: _drawer,
   );
}

可选属性

  • searchHint - 在用户输入任何文本之前显示的提示字符串；
  • iconified - 一个布尔值，指示非激活 SearchBar 的表示方式
    • true - 如果小部件应显示为 defaultBar 中的操作项；
    • false - 如果小部件应与 defaultBar 合并（在这种情况下，只显示默认小部件的引导图标和搜索输入字段）；
  • autofocus - 一个布尔值，决定搜索文本字段在可见时是否应获得焦点；
  • attrs - SearchBarAttrs 类实例，允许指定小部件构建过程中使用的部分精确值（例如，搜索栏颜色、文本大小、边框半径）；
  • onActivatedChanged - 一个回调函数，以布尔值接收小部件的当前状态；当用户开始或取消/结束搜索操作时触发；
  • searchItem - 定义如何在应用栏中构建和定位搜索项小部件。
  • overlayStyle - 小部件激活时应用的充电状态栏覆盖亮度。

查询回调

要获取用户输入的通知，请指定 onQueryChanged 和/或 onQuerySubmitted 回调函数，这些函数将当前查询字符串作为参数接收。

appBar: SearchBar(
   ...
   onQueryChanged: (query) => _handleQueryChanged(context, query),
   onQuerySubmitted: (query) => _handleQuerySubmitted(context, query),
),

QuerySetLoader

通过将 QuerySetLoader 对象作为参数传递，可以另外受益于搜索结果在搜索查询更改时自动构建为 ListView 小部件。

appBar: SearchBar(
  ...
  loader: QuerySetLoader<Item>(
     querySetCall: _getItemListForQuery,
     itemBuilder: _buildItemWidget,
     loadOnEachChange: true,
     animateChanges: true,
  ),
),

List<Item> _getItemListForQuery(String query) { ... }

Widget _buildItemWidget(Item item) { ... }
  • querySetCall - 将搜索查询转换为项目列表的函数，然后这些项目将在 ListView 中呈现（必需）；
  • itemBuilder - 在 ListView 构建期间为结果集中的每个元素创建 Widget 对象的函数（必需）；
  • loadOnEachChange - 一个布尔值，指示 querySetCall 是否应在每次查询更改时触发；如果为 false，则在用户提交查询时加载查询集；
  • animateChanges - 确定 ListView 的插入和删除操作是否应进行动画。

SearchItem

指定此参数可自定义搜索项在应用栏中的构建和定位方式。它可以是 action 或 menu 小部件。无论选择哪一个，都可以传递两个构造函数参数：

  • builder - 接收当前 BuildContext 并返回 action 的 Widget 或 menu 项的 PopupMenuItem；
  • gravity - 可以是 SearchItemGravity 的值之一：start、end 或 exactly。
    如果不传递任何参数，SearchBar 将创建默认项，即具有 start 重力的搜索操作图标。

SearchItem.action

Search action item 
appBar: SearchBar(
  // ...
  searchItem: SearchItem.action(
    builder: (_) => Padding(
      padding: EdgeInsets.all(12.0),
      child: Icon(
        Icons.find_in_page,
        color: Colors.indigoAccent,
      ),
    ),
    gravity: SearchItemGravity.exactly(1),
  ),
)

SearchItem.menu

Search menu item 
appBar: SearchBar(
  // ...
  searchItem: SearchItem.menu(
    builder: (_) => PopupMenuItem(
      child: Text("Search  ?"),
      value: "search",
    ),
    gravity: SearchItemGravity.end,
  ),
)

另外，请记住，**SearchBar 将阻止构建的项小部件接收点击事件**，而是会开始搜索操作。

GitHub

https://github.com/tomwyr/loader-search-bar