概述
当界面的内容需要依靠网络请求的数据,就需要处理苦恼的,状态是空,非空的逻辑了,不然页面构建可能会报错,而FutureBuilder提供了一个非常好的解决方法,直接看代码
代码
异步操作函数
即网络请求函数(通常情况下)
Dart
Future<List<String>> fetchStringList() async {
return Future.delayed(Duration(seconds: 2), () {
// 模拟网络请求
return ['Item 1', 'Item 2', 'Item 3'];
});
}
widget构建部分
Dart
class MyApp extends StatelessWidget {
@override
Widget 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]),
);
},
);
}
},
),
),
),
);
}
}
可以看出来,这为需要异步操作的页面提供了更好的构建页面方式。