打造鸿蒙系统中最好用的加载动画和提示弹窗 原创

幽蓝计划
发布于 2025-4-17 10:58
浏览
2收藏

自从从事鸿蒙开发工作以来,幽蓝君一直在寻找一种优雅的弹窗方式,我不想要在每一个页面添加组件或者初始化,我只想要在我需要的时候,一句话就能弹出我需要的加载动画或者提示弹窗,简单粗暴又不失优雅。
今天我要正式的跟大家分享这个极其简单好用的工具,我给它取名yloadinghud,我现在迫不及待的想要展示一下它有多好用:
打造鸿蒙系统中最好用的加载动画和提示弹窗-鸿蒙开发者社区
不管是在任何一个页面,不管在任何地方,当你需要加载动画,或者需要文字提示,你只需要一行代码就能搞定,就是如此的优雅。
yloadinghud也已经上传到ohpm仓库,仓库地址是:

https://ohpm.openharmony.cn/#/cn/detail/@youlanjihua%2Fyloadinghud
  • 1.

下面介绍一下如何安装和使用这个工具:
首先执行命令安装yloadinghud:

ohpm i @youlanjihua/yloadinghud
  • 1.

安装完成后,进行一下非常简单的配置。在EntryAbility.ets文件中引入项目:

import { yloadinghud } from '@youlanjihua/yloadinghud/Index'
  • 1.

然后在onWindowStageCreate方法中添加以下代码:

yloadinghud.gloabalWindowStage = windowStage
  • 1.

现在你就可以在整个项目中随心所欲的使用它了
打造鸿蒙系统中最好用的加载动画和提示弹窗-鸿蒙开发者社区
当你需要加载动画:

yloadinghud.showLoading()
  • 1.

当加载完成,需要让动画消失时:

yloadinghud.dismiss()
  • 1.

除了加载动画之外,其他的提示类型都做了2.5秒自动消失的设计,所以你只管弹就行了,其他的什么都不用管。
比如显示一个加载成功的弹窗:

yloadinghud.showSuccess()
  • 1.

加载失败的弹窗:

yloadinghud.showError()
  • 1.

还有普通的文字弹窗,没有图标展示:

yloadinghud.showContent('请输入不少于8位的包含大小写字母和特殊字符串的密码')
  • 1.

yloadinghud是幽蓝君贡献的第一个三方库项目,希望能给广大鸿蒙开发者带来便利。欢迎大家使用,也欢迎大家提出宝贵建议,让它更加完美。


最后贴一段demo向大家演示具体的使用方法:

import { yloadinghud } from '@youlanjihua/yloadinghud/Index';

@Entry
@Component
struct Index {

  build() {
    Column({space:20}) {

      Button('加载')
        .onClick(()=>{
          yloadinghud.showLoading()
        })
      Button('提示')
        .onClick(()=>{
          yloadinghud.showContent('这是一个弹窗哟~')
        })
      Button('成功')
        .onClick(()=>{
          yloadinghud.showSuccess()
        })
      Button('失败')
        .onClick(()=>{
          yloadinghud.showError()
        })

      Button('关闭弹窗')
        .onClick(()=>{
          yloadinghud.dismiss()
        })

    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Start)
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2025-4-23 10:48:00修改
收藏 2
回复
举报
2
回复
    相关推荐