Flutter - 将未来列表传递给 SearchDelegate

Question

我一直在关注 - boring flutter show 上的 Flutter Search 教程 .我一直在尝试使用从未来列表派生的列表来实现相同的功能，其中数据来自 api（在本例中为 Aqueduct 服务器）。

目前我的屏幕列出了 api 中的所有联系人，我现在想针对该联系人列表进行搜索。我假设将相同的列表（已经显示）传递给搜索委托是最佳实践。不幸的是，我不确定如何实现这一点。

我的代码如下（请注意我已经为这个例子去掉了一些代码）：

class _ContactsScreenState extends State<ContactsScreen> {
  static const _usersUrl = //url info;
  static final _token = //token info;
  static final _headers = {
    "Content-type" : "application/json", 
    "Accept": "application/json",
    "Authorization": "Bearer $_token",
  };

  HttpRequestStatus httpRequestStatus = HttpRequestStatus.NOT_DONE;

  Future<List<Contact>> readContacts() async {
    final response = await http.get(_usersUrl, headers: _headers);
    List responseJson = json.decode(response.body.toString());
    List<Contact> contactList = createContactList(responseJson);
    return contactList;
  }

  List<Contact> createContactList(List data) {
    List<Contact> list = List();

    for (int i = 0; i < data.length; i++) {
      String name = data[i]["name"];
      int id = data[i]["id"];
      Contact user = Contact(name: name, id: id);
      list.add(user);
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('List Contacts'),
        actions: [
          IconButton(
            icon: Icon(Icons.search),
            tooltip: 'Search',
            onPressed: (){
               showSearch(
                 context: context,
                 delegate: ContactSearch(),
               );
            }
          ),
        ],
      ),

      body: Container(
        child: FutureBuilder<List<Contact>>(
          future: readContacts(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
               //Code which displays the data (works fine);
            }
          }
        ),
      )
    )
  }
}


class ContactSearch extends SearchDelegate<Contact> {
  @override
  <Widget> buildActions(BuildContext context){
    //
  }
  @override
  Widget buildLeading(BuildContext context){
    //
  }
  @override
  Widget buildSuggestions(BuildContext context){
    //Pass contacts list to here and compares agains 'query' 
  }
  @override
  Widget buildResults(BuildContext context) {
    return container();
  }
}

简而言之，我需要通过“ContactSearch()”传递正确的列表/数据：

showSearch(
  context: context,
  delegate: ContactSearch(),
);

提前致谢。

Answer 1

基本上，您必须将 FutureBuilder 进一步向上移动小部件层次结构，因此搜索框和正文都位于其下方。然后您可以简单地将您的数据推送到 ContactSearch 中。

例如：

@override
Widget build(BuildContext context) {
  return FutureBuilder<List<Contact>>(
      future: readContacts(),
      builder: (context, snapshot) {
        return Scaffold(
          appBar: AppBar(
            title: Text('List Contacts'),
            actions: [
              IconButton(
                  icon: Icon(Icons.search),
                  tooltip: 'Search',
                  onPressed: !snapshot.hasData ? null : () {
                    showSearch(
                      context: context,
                      delegate: ContactSearch(snapshot.data),
                    );
                  }
              ),
            ],
          ),

          body: Container(
            child:
            (snapshot.hasData ?
            //Code which displays the data (works fine);
                : /* show errors/progress/etc. */),
          ),
        );
      }
  );
}