Flutter 异步之FutureBuilder在加载时，有等待提示

最新推荐文章于 2025-08-16 11:28:22 发布

原创

最新推荐文章于 2025-08-16 11:28:22 发布 · 532 阅读

0 ·

CC 4.0 BY-SA版权

这个Flutter代码示例展示了如何使用FutureBuilder在加载数据时显示加载指示器。当Future完成时，它会显示成功图标和结果，如果Future出现错误，则显示错误图标和错误信息。示例中，_calculation字段通过UI按钮设置并延迟2秒返回'DataLoaded'。

/// Flutter code sample for FutureBuilder

// This sample shows a [FutureBuilder] that displays a loading spinner while it
// loads data. It displays a success icon and text if the [Future] completes
// with a result, or an error icon and text if the [Future] completes with an
// error. Assume the `_calculation` field is set by pressing a button elsewhere
// in the UI.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @ove