Flutter：从UI调用异步代码的最佳实践

Question

我正在开发一个Flutter应用程序，但想知道在从UI调用异步代码时应该做什么--比方说UI小部件的构建方法。

例如，我的应用程序通过一个服务类连接Firebase，该服务类使用Async-Await样式从Firebase获取记录。使用await可以确保我的服务类的方法在返回UI端之前完成记录检索。

@override
Widget build(BuildContext context) {

   RealtimeDatabase.getData()  // my service class
      .then((onValue) {
        ..... // do something after the async call is completed
   }

   ..... // do something immediately before the async call is done


class RealtimeDatabase {

    Future<String> getData() async {

    DataSnapshot dataSnapshot = await FirebaseDatabase.instance.reference().orderByKey().once(); // will wait until completed
    .....
    .....

吉米

Answer 1

在Flutter中，有一些小部件可以帮助您无缝地完成此操作（例如FutureBuilder、StreamBuilder)，您可以根据它们的分辨率来控制要呈现的内容。

FutureBuilder上的示例：

Widget build(BuildContext context) {
    return new FutureBuilder(
    future: FirebaseDatabase.instance.reference().child("node"),
    builder: (BuildContext context, AsyncSnapshot snapshot) {
          return snapshot.hasData? new Scaffold(
          ///start building your widget tree
          ):new CircularProgressIndicator(); ///load until snapshot.hasData resolves to true
},);
  }

StreamBuilder的示例：

class Database {

  DatabaseReference _refProfile = FirebaseDatabase.instance.reference().child(
      "profiles");

  getProfiles() => _refProfile.onValue; }

Widget build(BuildContext context) {
      return new StreamBuilder<Event>(
          stream: _database.getProfiles(), //_database = new Database()
          builder: (BuildContext context, AsyncSnapshot<Event> event) {
          return event.hasData?new Scaffold(

///build your widget tree
                    ):new CircularProgressIndicator();

/// place holder
}

另一方面，StreamBuilder使您能够继续监听数据，并且可以根据数据的任何更新来更新UI的状态。