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

Question

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

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

但是，由于服务类的方法被标记为异步，它会立即向调用 UI 小部件返回 Future，并且 UI 代码会在服务类的方法完成之前继续运行。

是的，我可以为“then()”回调编写代码来处理检索到的记录，但是接下来的小部件内的其他代码呢，并且取决于异步调用的结果？这是否意味着我需要在“then()”子句中嵌入所有内容，并避免在返回 Future 的方法调用之后添加任何执行步骤？这种使用模式有什么建议的模式吗？

@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
}

值得一提的是

FutureBuilder 更适合用于获取一些数据一次并且不关心保持一致的连接或跟踪数据中的任何更改。

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

Answer 2

虽然我认为@aziza 提到的方法绝对是可行的方法，但值得注意的是，您也可以“自己动手”。

因此，例如，在initState() 中，您可以执行以下操作：

@override
void initState() {
    super.initState();
    _myItems = // some sane default
    FirebaseDatabase.instance.reference().child("node")
      .then((items) {
        if (widget.mounted) setState(() { _myItems = items; }
      });
}

Widget build(BuildContext context) {
  return new Scaffold(
   ///start building your widget tree
  );
}

最好在这里使用FutureBuilder，但这是另一种方法（即使它不一定是最佳做法）。