概述
当界面的内容需要依靠网络请求的数据,就需要处理苦恼的,状态是空,非空的逻辑了,不然页面构建可能会报错,而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]),);},);}},),),),);}
}
可以看出来,这为需要异步操作的页面提供了更好的构建页面方式。