如何在 Flutter 中创建异步代码？

Question

在我的代码中，我通过 TextFormFields 获取一些用户输入并将它们保存在 Firestore 的地图中。 在下一步中，我想用这些数据进行计算，并在同一个小部件中向用户显示它们。 我认为由于保存在数据库中的延迟，我需要等到数据保存。 但是我该怎么做呢？ 这是我想等待的代码：

  void validate() {
    if (_formKey.currentState.validate()) {
      UserManager.userdata["userStats"][0]["userActivity"] = userActivity;
      savetoremote_dynamic(context);
      AppBuilder.of(context).rebuild();
    }
  }

这是重建类，以便更新 UI：

class AppBuilderState extends State<AppBuilder> {

  @override
  Widget build(BuildContext context) {
    return widget.builder(context);
  }

  void rebuild() {
    setState(() {});
  }
}

我希望一旦保存数据，Widget 就会重建并向用户显示更新的数据，如何在此代码中使用 async 和 await？

Answer 1

我建议您使用 Provider/Riverpod 或任何适合您的状态管理。 或者，您可以在从 FireStore 或任何其他 API 加载数据时使用 FutureBuilder 来显示指标。

Answer 2

我不清楚您的代码段中的异步代码是什么。 但是，在 flutter 中，根据异步操作的结果更新 gui 的最小模式是：

• 在颤振回调中（例如 ElevatedButton.onTap 或 initState，如果代码要在启动时执行；在您的情况下可以验证）使用异步代码调用您的方法 - 例如getUserDataFromFirestore() -无需等待结果。 您通常不能使用async标记颤振回调，例如validate() 。

• 带有异步操作的方法getUserDataFromFirestore()可以用 async 标记，所以在它里面你可以使用await future而不是future.then() （但它只是语法糖）。

  当您获得异步数据时，您对一个变量进行赋值，例如userData ，然后调用 setState() 重建。

• 在构建方法中，您检查userData是否不为空，然后您可以显示用户数据（例如，如果在 Column.children 列表中，则使用集合）。

• 如果异步操作必须在启动时（页面加载时或类似的时候）执行，FutureBuilder 非常方便：而不是像User? user User? user ，你可以声明一个Future<User>字段：

  在您的 State 子类中：

   late Future<User> user; @override initState() { super.initState(); user = getUserDataFromFirestore(); } Furure<User> getUserDataFromFirestore() async { //your async code; returns the user data } @override build(context) { return FutureBuilder( future: user, builder: (context, asyncSnapshot) { if (! asyncSnapshot.hasData) { //user data is not available. //returns a gui that does not display the user data } else { //user data is available.. } } ); }

使用此模式在 flutter 中进行最小异步操作的一个简单示例位于此食谱页面中： https : //flutter.dev/docs/cookbook/networking/fetch-data