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();});}