Flutter 中的 FutureBuilder 小部件：全面指南

import 'package:flutter/material.dart';
 
class FutureBuilderExample extends StatefulWidget {
  @override
  _FutureBuilderExampleState createState() => _FutureBuilderExampleState();
}
 
class _FutureBuilderExampleState extends State<FutureBuilderExample> {
  Future<String> _future;
 
  @override
  void initState() {
    super.initState();
    // 假设这是一个异步获取数据的操作
    _future = Future.delayed(Duration(seconds: 2), () => '数据加载成功');
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FutureBuilder 示例'),
      ),
      body: Center(
        child: FutureBuilder<String>(
          future: _future,
          builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
            switch (snapshot.connectionState) {
              case ConnectionState.none:
              case ConnectionState.waiting:
                return CircularProgressIndicator();
              case ConnectionState.active:
              case ConnectionState.done:
                if (snapshot.hasError) {
                  return Text('出现错误: ${snapshot.error}');
                } else {
                  return Text('数据: ${snapshot.data}');
                }
            }
          },
        ),
      ),
    );
  }
}

这段代码展示了如何在Flutter中使用FutureBuilder小部件来处理异步加载的数据。它首先在initState方法中初始化一个将在2秒后解决的异步操作的Future。然后在build方法中，它使用FutureBuilder来监听这个Future的状态变化，并根据状态显示不同的UI。如果Future完成并且有数据，它会显示数据；如果Future完成但有错误，它会显示错误信息；如果Future还在进行中，它会显示一个进度指示器。这是一个简洁且有效的处理异步数据加载的方法。