Flutter 处理异步操作并根据异步操作状态动态构建界面的方法FutureBuilder

概述

当界面的内容需要依靠网络请求的数据，就需要处理苦恼的，状态是空，非空的逻辑了，不然页面构建可能会报错，而FutureBuilder提供了一个非常好的解决方法，直接看代码

代码

异步操作函数

即网络请求函数（通常情况下）

Future<List<String>> fetchStringList() async {return Future.delayed(Duration(seconds: 2), () {// 模拟网络请求return ['Item 1', 'Item 2', 'Item 3'];});
}

widget构建部分

class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('FutureBuilder Example'),),body: Center(child: FutureBuilder<List<String>>(future: fetchStringList(), // Future函数builder: (context, snapshot) {if (snapshot.connectionState == ConnectionState.waiting) {// 数据还在加载中，显示一个加载指示器return CircularProgressIndicator();} else if (snapshot.hasError) {return Text('Error: ${snapshot.error}');} else {return ListView.builder(itemCount: snapshot.data!.length,itemBuilder: (context, index) {return ListTile(title: Text(snapshot.data![index]),);},);}},),),),);}
}

可以看出来，这为需要异步操作的页面提供了更好的构建页面方式。