简介
一般来说，Flutter的Widget分为有状态和无状态两种，大多数情况下够用了。
不过如果涉及到异步计算，build的方法后面加一个async是没有效果的，不论是有状态还是无状态的Widget都一样。比如，像下面这样用是不行的：
@override
Widget build(BuildContext context) async {
await fetchData();
return Container();
}
Future<String> fetchData() async {
// 模拟一个网络请求，这里使用延迟来模拟
await Future.delayed(Duration(seconds: 2));
return 'Hello, Flutter!';
}
延时创建
在build方法中套一个FutureBuilder就可以处理这种情况。
import 'package:flutter/material.dart';
import 'dart:convert';
import 'dart:async';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('FutureBuilder Example'),
),
body: Center(
child: FutureBuilderDemo(),
),
),
);
}
}
class FutureBuilderDemo extends StatelessWidget {
Future<String> fetchData() async {
// 模拟一个网络请求，这里使用延迟来模拟
await Future.delayed(Duration(seconds: 2));
return 'Hello, Flutter!';
}
@override
Widget build(BuildContext context) {
return FutureBuilder<String>(
future: fetchData(),
builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator();
} else if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
} else if (snapshot.hasData) {
return Text('Data: ${snapshot.data}');
} else {
return Text('No data');
}
},
);
}
}
