Flutter: SearchDelegate 委托showSearch定义搜索页面的内容

• API

class _MyHomeState extends State<MyHome> {
  List<String> _list = List.generate(100, (i) => 'item $i');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Search'),
        actions: <Widget>[
          Builder(
            builder: (context) {
              return IconButton(
                icon: Icon(Icons.search),
                onPressed: () async {
                  String r = await showSearch<String>(
                    context: context,
                    delegate: ListSearchPage(_list),
                  );
                  Scaffold.of(context).showSnackBar(
                    SnackBar(
                      content: Text(r),
                      action: SnackBarAction(
                        label: 'CLOSE',
                        onPressed: () {

                        },
                      ),
                    ),
                  );
                },
              );
            },
          )
        ],
      ),
      body: ListView(
        children: <Widget>[
          for (var el in _list)
            ListTile(
              title: Text(el),
            ),
        ],
      ),
    );
  }
}

class ListSearchPage extends SearchDelegate<String> {
  List<String> list;
  String select;

  ListSearchPage(this.list);

  @override
  appBarTheme(BuildContext context) {
    return Theme.of(context);
  }

  @override
  List<Widget> buildActions(BuildContext context) {
    return [
      IconButton(
        icon: Icon(Icons.close),
        onPressed: () {
          query = '';
        },
      ),
    ];
  }

  @override
  Widget buildLeading(BuildContext context) {
    return IconButton(
      icon: Icon(Icons.arrow_back),
      onPressed: () {
        close(context, '');
      },
    );
  }

  /// 用户从搜索页面提交搜索后显示的结果
  @override
  Widget buildResults(BuildContext context) {
    var filterList = list.where((String s) => s.contains(query.trim()));
    return ListView(
      children: <Widget>[
        for (String item in filterList)
          ListTile(
            leading: Icon(
              Icons.message,
              color: Colors.blue,
            ),
            title: Text(
              item,
              style: Theme.of(context).textTheme.title,
            ),
            onTap: () {
              close(context, item);
            },
          ),
      ],
    );
  }

  /// 当用户在搜索字段中键入查询时，在搜索页面正文中显示的建议
  @override
  Widget buildSuggestions(BuildContext context) {
    var filterList = list.where((String s) => s.contains(query.trim()));
    return ListView(
      children: <Widget>[
        for (String item in filterList)
          ListTile(
            leading: Icon(Icons.message),
            title: Text(
              item,
              style: Theme.of(context).textTheme.title,
            ),
            onTap: () {
              close(context, item);
            },
          ),
      ],
    );
  }
}