Flutter FutureBuilder

FutureBuilderFutureは、 の結果に基づいてユーザー インターフェイスを構築するための Flutter のウィジェットです。Futureオブジェクトとコンストラクターをパラメーターとして受け取ります。

FutureBuilderFutureオブジェクトへの変更をリッスンし、それに応じて UI を更新します。の解析中にFuture読み込みインジケーターを表示できます。完了するとFuture、ビルド関数が呼び出され、返されたデータが処理され、成功または失敗のステータスに基づいて UI が構築されます。

FutureBuilderを使用した例を次に示します。

Future<String> fetchData() async {
  // 模拟异步调用
  await Future.delayed(Duration(seconds: 2));
  return "数据加载成功";
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder<String>(
      future: fetchData(),
      builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          // 在等待 Future 完成时显示加载指示器
          return CircularProgressIndicator();
        } else {
          if (snapshot.hasError) {
            // 处理错误情况
            return Text('错误：${snapshot.error}');
          } else {
            // 数据已经成功获取
            return Text('数据：${snapshot.data}');
          }
        }
      },
    );
  }
}

この例では、fetchData関数は文字列値を返す非同期操作を表しますFuture。FutureBuilderこれをビルダー関数とともに渡して、さまざまな状態に基づいて UI を構築するFuture方法を定義します。Futureこの例では、データのロード中にロード インジケーターを表示し、エラーがある場合はエラー メッセージを表示し、正常にフェッチされた場合はフェッチされたデータを表示します。