flutter使用get依赖实现全局loading效果,弹窗loading状态
【代码】flutter使用get依赖实现全局loading效果,弹窗loading状态。
·
get dialog的官网文档:GetDialogRoute class - dialog_route library - Dart API

可以使用Get.dialog()方法来创建一个自定义的加载弹窗,get框架是支持自定义弹窗效果的,所以我们就使用这个方式来自定义一个弹窗效果,并且点击遮罩区域可以实现关闭,这个功能要先在组件里面创建一个loading.dart文件,然后代码如下:
import 'package:flutter/material.dart';
import 'package:get/get.dart';
class LoadingDialog {
static show() {
Get.dialog(
GestureDetector(
child: Container(
color: Colors.black54,
child: const Center(
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
),
),
),
onTap: () {
// 点击是否退出模态框
Get.back();
},
),
barrierDismissible: false,
);
}
static hide() {
Get.back();
}
}
然后在组件中使用,如果你想在路由跳转的时候,就展示loading效果,就可以在Get.toName()跳转后立马调用:

然后当页面数据加载完之后隐藏loading:

我这里使用了延时两秒来关闭弹窗,不然无法关闭:
getGoods() async {
var res = await userApi.getGoods();
var goodsData = res['response_data']['data'];
setState(() {
goods = goodsData;
});
//
Future.delayed(Duration(seconds: 2), () {
print("退出加载...");
// Get.back();
LoadingDialog.hide();
});
}
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐

所有评论(0)