Flutter搜索界面的实现，SearchDelegate的使用

Flutter 搜索界面的实现，SearchDelegate的使用

1.使用系统的搜索界面

在之前的学习中自己实现了了一个搜索界面，其中自定义了搜索栏，实现效果也就将就，后来发现在Flutter中有现成的控件可以使用，也就是SearchDelegate,调用showSearch(context: context, delegate: searchBarDelegate())实现。

2.定义SearchDelegate

class searchBarDelegate extends SearchDelegate {
  @override
  List buildActions(BuildContext context) {
    return null;
  }

  @override
  Widget buildLeading(BuildContext context) {
    return null;
  }

  @override
  Widget buildResults(BuildContext context) {
    return null;
  }

  @override
  Widget buildSuggestions(BuildContext context) {
    return null;
  }


  @override
  ThemeData appBarTheme(BuildContext context) {
    // TODO: implement appBarTheme
    return super.appBarTheme(context);
  }
}

继承SearchDelegate之后需要重写一些方法，这里给定的String类型是指搜索query的类型为String。

• List buildActions(BuildContext context):这个方法返回一个控件列表，显示为搜索框右边的图标按钮，这里设置为一个清除按钮,并且在搜索内容为空的时候显示建议搜索内容，使用的是showSuggestions(context)方法：

@override
List buildActions(BuildContext context) {
  return [
    IconButton(
      icon: Icon(Icons.clear),
      onPressed: () {
        query = "";
        showSuggestions(context);
      },
    ),
  ];
}

• showSuggestions(context)：这个方法显示建议的搜索内容，也就是Widget buildSuggestions(BuildContext context)方法的的调用；

• Widget buildLeading(BuildContext context):这个方法返回一个控件，显示为搜索框左侧的按钮，一般设置为返回，这里返回一个具有动态效果的返回按钮：

@override
Widget buildLeading(BuildContext context) {
  return IconButton(
    icon: AnimatedIcon(
        icon: AnimatedIcons.menu_arrow, progress: transitionAnimation),
    onPressed: () {
      if (query.isEmpty) {
        close(context, null);
      } else {
        query = "";
        showSuggestions(context);
      }
    },
  );
}

• Widget buildSuggestions(BuildContext context):这个方法返回一个控件，显示为搜索内容区域的建议内容。
• Widget buildSuggestions(BuildContext context):这个方法返回一个控件，显示为搜索内容区域的搜索结果内容。
• ThemeData appBarTheme(BuildContext context)：这个方法返回一个主题，也就是可以自定义搜索界面的主题样式：

///  * [AppBar.backgroundColor], which is set to [ThemeData.primaryColor].
///  * [AppBar.iconTheme], which is set to [ThemeData.primaryIconTheme].
///  * [AppBar.textTheme], which is set to [ThemeData.primaryTextTheme].
///  * [AppBar.brightness], which is set to [ThemeData.primaryColorBrightness].
ThemeData appBarTheme(BuildContext context) {
  assert(context != null);
  final ThemeData theme = Theme.of(context);
  assert(theme != null);
  return theme.copyWith(
    primaryColor: Colors.white,
    primaryIconTheme: theme.primaryIconTheme.copyWith(color: Colors.grey),
    primaryColorBrightness: Brightness.light,
    primaryTextTheme: theme.textTheme,
  );
}

可以看到默认的的浅色主题白底灰字，可以自行修改；

建议搜索内容

搜索结果展示

3.调用showSearch(context: context, delegate: searchBarDelegate())方法跳转到搜索界面

showSearch(context: context, delegate: searchBarDelegate()):跳转到搜索界面。