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

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

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

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

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

ohpm i @youlanjihua/yloadinghud

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

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

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

yloadinghud.gloabalWindowStage = windowStage

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

yloadinghud.showLoading()

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

yloadinghud.dismiss()

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

yloadinghud.showSuccess()

加载失败的弹窗:

yloadinghud.showError()

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

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

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

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