Flutter-将未来列表传递给SearchDelegate [英] Flutter - Pass a Future List to a SearchDelegate

问题描述

我一直在-无聊的颤抖表演中遵循Flutter Search教程 .我一直在尝试使用从Future List派生的列表实现相同的功能，该列表的数据来自api(在本例中为Aqueduct服务器).

I've been following a Flutter Search tutorial on the - boring flutter show . I have been trying to implement the same functionality using a list which is derived from a Future List where the data comes from an api (in this case and Aqueduct server).

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

Currently my screen lists all the contacts from the api, i'd now like to search against that contacts list. I'm assuming it would be best practice to pass the same list (which is already being displayed) to the search delegate. Unfortunately i'm not sure how to achieve this.

我的代码如下(请注意，我已为该示例删除了一些代码):

My code is as follows (please note i've stripped down some of the code for this examples):

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()'传递正确的列表/数据:

So in brief, i need to pass the correct list/data through 'ContactSearch()':

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

谢谢.

推荐答案

基本上，您必须将FutureBuilder进一步移至小部件层次结构的上方，因此搜索框以及主体均位于其下方.然后，您只需将数据推送到ContactSearch中即可.

Basically you have to move the FutureBuilder further up the widget hierarchy, so both the search box as well as the body are below it. Then you can simply push your data into the 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. */),
          ),
        );
      }
  );
}

这篇关于Flutter-将未来列表传递给SearchDelegate的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！