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

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐