Flutter 如何从异步函数中获取数据

Question

我在处理这个问题时遇到了极大的困难。我调用了一个异步函数，它将从 SQLite 获取一些信息，但我似乎无法获取它。它只是呈现一个空屏幕，其中应该是一个列表视图。

List allItems = new List();


Future<void> pegaDados() async{
  var itens = await geraCardapio();

  for (var i = 0; i < itens.length; i++) {
    print((itens[i].toMap()));
    allItems.add(itens[i].toMap());
  }

}

print(pegaDados());


  return ListView.builder(
    itemCount: allItems.length,
    itemBuilder: (context, index) {
      return ListTile(
        leading: Image.asset("assets/"+ allItems[index]['imagem'], fit: BoxFit.contain,),
        title: Text(allItems[index]['pedido']),
        trailing: Text(allItems[index]['valor']),
      );
    },
  );

非常感谢。

我设法得到了解决方案，感谢回答问题的两个人（使用这两种解决方案我设法得到了这个小弗兰肯斯坦）

    Future<dynamic> pegaDados() async{
  var allItems = await geraCardapio();

  return allItems.map((allItems) => allItems.toMap());
}



return FutureBuilder(
      future: pegaDados(),
      builder: (context, snapshot){
        if(snapshot.connectionState == ConnectionState.done){
          print(snapshot.data);
          var objeto = [];

          for (var i in snapshot.data) {
            objeto.add(i);
          }

          print(objeto);
          return Container(
              child: ListView.builder(
            itemCount: objeto.length,
            itemBuilder: (context, index) {
              return ListTile(
                leading: Image.asset("assets/"+ objeto[index]['imagem'], fit: BoxFit.contain,),
                title: Text(objeto[index]['pedido']),
                trailing: Text(objeto[index]['valor'].toString()),
              );
            },
              ),
          );
        }
        else if(snapshot.hasError){
          throw snapshot.error;
        }
        else{
          return Center(child: CircularProgressIndicator());
        }
      },
    );

感谢Mohammad Assem Nasser和Eliya Cohen的帮助！

Answer 1

您应该首先了解什么是Future操作（Future在您的情况下是函数）。未来操作是需要时间执行并稍后返回结果的操作。为了解决这个问题，我们使用异步函数。

异步函数让您的程序在执行当前操作时继续执行其他操作。Dart 使用对象（Futures）来表示异步Future操作的结果。为了处理这些操作，我们可以使用async/await，但不可能在小部件上集成 async 和 wait 。所以在小部件中处理 future 是相当棘手的。为了解决这个问题，flutter 提供了一个名为 的 widget 。FutureBuilder

在 中FutureBuilder，它调用Future 函数来等待结果，一旦产生结果，它就会调用我们构建小部件的构建器函数。

应该是这样的：

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  List allItems = new List();

  Future<List> pegaDados() async{
    var items = await geraCardapio(); // TODO: Add this function to this class

    for (var i = 0; i < items.length; i++) {
      print((items[i].toMap()));
      allItems.add(items[i].toMap());
    }
  return items;
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: Text('Demo')),
      body: FutureBuilder(
        future: pegaDados(),
        builder: (context, snapshot){
          if(snapshot.connectionState == ConnectionState.done){
            return Container(
                child: ListView.builder(
              itemCount: snapshot.data.length,
              itemBuilder: (context, index) {
                return ListTile(
                  leading: Image.asset("assets/"+ snapshot.data[index]['imagem'], fit: BoxFit.contain,),
                  title: Text(snapshot.data[index]['pedido']),
                  trailing: Text(snapshot.data[index]['valor']),
                );
              },
                ),
            );
          }
          else if(snapshot.hasError){
            throw snapshot.error;
          }
          else{
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
    );
  }
}

这是一个简短视频的链接，它将FutureBuilder以简洁的方式进行解释。