flutter - Flutter:如何让页面等到数据加载?
问题描述
我在使用数据库时使用了异步,但是,页面在数据之前加载。在页面上,许多小部件都连接到trophyPoint
变量,并且页面在变量之前加载。我使用AutomaticKeepAliveClientMixin
了底部导航栏所在的位置。它适用于幻灯片导航,但是当我点击导航栏项目时,变量首先返回 null,这就是问题所在。
编辑:我也尝试使用SharedPreferences
该类来加载旧数据,但它也不起作用。
代码
class MainScreen extends StatefulWidget {
static String id = "MainScreen";
@override
_MainScreenState createState() => _MainScreenState();
}
class _MainScreenState extends State<MainScreen> {
int trophyPoint = 0;
final Future<FirebaseApp> _future = Firebase.initializeApp();
//Database instance
final _db = FirebaseDatabase.instance
.reference()
.child("users")
.child(_auth.currentUser.uid);
//method for data
void readData(
_db,
) async {
await _db.once().then((DataSnapshot snapshot) {
if (!mounted) return;
setState(() {
trophyPoint = snapshot.value["tp"];
});
});
}
/* void tp() async {
SharedPreferences sharedPreferences = await SharedPreferences.getInstance();
if (!mounted) return;
setState(() {
geciciTP = sharedPreferences.getInt("trophy");
sharedPreferences.setInt("geciciTP", geciciTP);
});
}*/
@override
void initState() {
// TODO: implement initState
super.initState();
}
@override
void dispose() {
// TODO: implement dispose
super.dispose();
}
@override
Widget build(BuildContext context) {
readData(_db);
Size size = MediaQuery.of(context).size;
precacheImage(AssetImage('images/indicator.gif'), context);
return buildContainer(size, context);
}
Container buildContainer(Size size, BuildContext context) {
return Container(
decoration: BoxDecoration(
gradient: kGradientColor,
),
child: Scaffold(
backgroundColor: Colors.transparent,
body: FutureBuilder(
future: _future,
initialData: trophyPoint,
builder: (context, snapshot) {
return SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(
flex: 2,
child: Stack(
fit: StackFit.expand,
children: [
Positioned(
right: size.width / 25,
top: size.height / 60,
child: Container(
width: 100,
height: size.height * 0.055,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(45),
color: kDefaultLightColor,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
FontAwesomeIcons.trophy,
color: Color(0xffFFD700),
),
Text(
" $trophyPoint",
...
解决方案
在FutureBuilder中,您可以检查:
if(snapshot.hasData){
return body....
} else {
return CircularProgressIndicator()
}
链接中的示例非常好。
推荐阅读
- angular - 如何以角度测试属于另一个服务的可观察对象
- excel - 使用 VBA 更新数据透视表过滤器
- php - 错误:Dockerfile 解析错误第 4 行:未知指令:PHP7
- node.js - rxjs 订阅返回重复项
- c++ - Qt 可选参数没有匹配的函数调用
- c# - 页面更改后列表视图不刷新(WPF C#)
- security - 覆盖 GitLab 异常管理员中的所有用户密码
- python - 关于 pipfile 中的 2 个包实例的问题
- c# - 使用 CookieRequestCultureProvider 在 .netcore 2.1 MVC 应用程序中进行本地化
- javascript - 无法在 react-native 中使用我的 this.handleChange 传递事件参数