首页 > 解决方案 > 如何在 Flutter 中获取异步值

问题描述

我有这个函数可以从中检索数据firestore并返回一个列表。我从另一个函数调用这个函数。

检索数据并返回列表的函数:

Future<List> getNewsOnSearchBar() async{
  final String _collection = 'news';
  final Firestore _fireStore = Firestore.instance;
  var newsList = [];

  print("1");

  Future<QuerySnapshot> getData() async {
    print("2");
    return await _fireStore.collection(_collection).getDocuments();
  }

  QuerySnapshot val = await getData();
  if (val.documents.length > 0) {
    print("3");
    for (int i = 0; i < val.documents.length; i++) {
      newsList.add(val.documents[i].data["headline"]);
    }
  } else {
    print("Not Found");
  }
  print("4");
  return newsList.toList();
}

我从另一个返回如下getNewsOnSearchBar()的函数调用这个函数:Widget

Widget _showSearchBar(BuildContext context) {
  var list = [];
  getNewsOnSearchBar().then((value){
    print(value); //this will print successfully
    list = value; //but this assign doesn't work
  });

  print(list); //prints an empty list

  return GFSearchBar(
    // overlaySearchListHeight: 160.0,

    searchList: list, //empty
    searchQueryBuilder: (query, list) {
      return list
          .where((item) => item.toLowerCase().contains(query.toLowerCase()))
          .toList();
    },
    overlaySearchListItemBuilder: (item) {
      return Container(
        padding: const EdgeInsets.all(3),
        child: Text(
          item,
          style: const TextStyle(fontSize: 18),
        ),
      );
    },
    onItemSelected: (item) {},
  );
}

有人能帮助我吗?

标签: flutter

解决方案


Future以错误的方式使用,当您构建依赖于 a 值的小部件时Future,您需要使用FutureBuilder,

因此,例如,您的_showSearchBar方法(我假设您在内部调用build以在屏幕上显示某些内容)将变为:

 Widget _showSearchBar(BuildContext context) {
  return FutureBuilder(
      future: getNewsOnSearchBar(),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        if (snapshot.hasData) {
          if (snapshot.data != null) {
            return GFSearchBar(
              // overlaySearchListHeight: 160.0,

              searchList: list, //empty
              searchQueryBuilder: (query, list) {
                return list
                    .where((item) => item.toLowerCase().contains(query.toLowerCase()))
                    .toList();
              },
              overlaySearchListItemBuilder: (item) {
                return Container(
                  padding: const EdgeInsets.all(3),
                  child: Text(
                    item,
                    style: const TextStyle(fontSize: 18),
                  ),
                );
              },
              onItemSelected: (item) {},
            );
          } else {
            return CircularProgressIndicator();
          }
        }
      }
  );
}

在此处了解有关Futures 的更多信息async/await

  1. https://www.youtube.com/watch?v=OTS-ap9_aXc
  2. https://www.youtube.com/watch?v=SmTCmDMi4BY
  3. https://www.youtube.com/watch?v=ek8ZPdWj4Qo

推荐阅读