美文网首页
鸿蒙Arkts自定义HUD弹窗控件

鸿蒙Arkts自定义HUD弹窗控件

作者: 喜欢程序世界 | 来源:发表于2024-08-10 17:36 被阅读0次

简单高效的HUD、dialog、aleart toast弹框组件,从简单一行代码开始。 例如:HappayHUD.showLoad(message)

* 如果你要自定义弹框,它为你提供了哪些参数?关于头部都以icon统称

    1. 可以全局、局部、设置窗口的背景色.

    2. 可以全局、局部、设置交互模式(不遮挡HUD区域外)、不可交互模式(全屏)

    3. 可以全局、设置弹框最大、最小宽度(宽高自适应模式)

    4. 可以局部设置HUD固定大小

    5. 可以局部设置HUD宽高等比

    6. 可以全局、局部设置不同状态下的icon

    7. 可以自定义加载头部组件,使用showCustomHeader完成显示

    8. 可以设置icon的大小

    9. 可以设置绘制动画的颜色

    10. 可以设置icon的外边距

    11. 可以全局、局部设置文字的大小

    12. 可以全局、局部设置文字颜色

    13. 可以全局、局部设置HUD的背景色

    14. 可以全局、局部设置HUD圆角

    15. 可以全局、局部设置最长的显示时间

    16. 可以全局设置最短的显示时间

    17. 可以局部设置延迟多少时间消失

    18. 可以接收消失回调

    19. 可以设置在屏幕上显示位置、默认居中

    20. 可以设置icon和文字的布局横向 纵向 反转

  查看demo了解更多 远程地址

* (大版本号1.0)版本 开发工具DevEco 4.1 Release API 9

* API10-12与API9代码相同 开发工具DevEco Studio NEXT Developer Beta1

请在[远程地址](https://atomgit.com/happay/happay_hud.git)查看,注意事项看下边补充说明

## HUD使用安装(API9)

> 该项目所必须的条件和相关依赖

* 安装方法:ohpm install @happay/happay_hud

* API9创建加载组件的页面:例如 "pages/HudPage"添加到main_pages中

* HUD弹框:在EntryAbility.ets必须实例化窗口管理

* HudWindowManager.getInstance(windowStage,"pages/HudPage")

* "pages/HudPage"页面中加载BaseComponent组件

使用说明

HudPage 页面展示

import { AleartComponent, BaseComponent, CustomLayoutComponent, HAPPAY_HUD_ALEART } from '@happay/happay_hud'

@Entry

@Component

export struct HudPage {

  @StorageLink(HAPPAY_HUD_ALEART) pageType: number = 0

  @Builder

  headerComponent() { // 自定义头部组件

    Column() {

    }.width(30)

    .height(30)

    .margin({ left: 10, right: 10, bottom: 10, top: 15 })

    .backgroundColor(Color.Pink)

  }

  build() {

    Column() {

      if (this.pageType === 1) {

        BaseComponent() // HUD弹窗的组件

      }

      if (this.pageType === 2) {

        AleartComponent() // aleart弹窗的组件  不用的组件可以删除

      }

      if (this.pageType === 3) {

        CustomLayoutComponent({

          headerLayout: (): void => this.headerComponent()

        }) // 自定义header

      }

}

}

}

## 补充说明

1. 全局参数建议在程序启动后设置

2. 单独的HUD样式使用建议使用局部参数

3. 局部参数使用 看调用方法中的 声明参数

4. 如果您的开发工具DevEco Studio NEXT Developer Beta1 API10-12请查看远程地址中的代码

5. 如果您再远程地址中下载的,master默认API10-12

6. 如果您的开发工具DevEco 4.1 Release API 9下载代码后需要注释掉API11-12的几行代码

7. 由于只能在业余空闲时间写,HappayAleart的内容还很死板,后期会慢慢修改。

8. 当前不支持gif加载 如果需要gif动画可以使用自定义头部组件,自己完成gif播放

* AppStorageUtil文件中else {}里的所有代码会自动提示错误的找不到set...直接注释就可以

  if (bundleInfo && bundleInfo.targetVersion <= 10) {

AppStorage.SetOrCreate(propName, newValue)

} else {

// AppStorage.setOrCreate(propName, newValue)

}

## 调用HappayHUD

相关文章

网友评论

      本文标题:鸿蒙Arkts自定义HUD弹窗控件

      本文链接:https://www.haomeiwen.com/subject/mzhphjtx.html