Question

我一直在-boring flutter show上关注Flutter Search教程。我一直在尝试使用从Future List派生的列表实现相同的功能，该列表的数据来自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. */),
          ),
        );
      }
  );
}

Flutter-将未来列表传递给SearchDelegate

1 个答案: