鸿蒙口试题：如安在鸿蒙ArkTs中举行全局弹框？

雁过留声 · 2024-6-24 06:29:45

背景

刚打仗鸿蒙开发不久，从iOS转过来的，经常会碰到在一个公共的类里，会想要给当前window上添加一个全屏的自界说视图，那在鸿蒙中应该如何实现这一个效果呢？
这里先容一下我自己想到的实现方式，不一定是最优解，大家有其他更好的方式大概问题，接待指正。
代码是基于鸿蒙next和模拟器
思路

在鸿蒙中，虽然可以通过下面的系统方法获取到window，但是目前我不知道如何像iOS一样，在其上添加自界说的组件。以是，在研究了系统的window之后，想到是否可以直接弹出一个全屏的window，然后在这个自界说的window上，添加我们的自界说组件。类似于iOS的三方库SwiftEntryKit

import { window } from '@kit.ArkUI'
function findWindow(name: string): Window;

复制代码

实现步骤

通过调用createWindow函数，创建一个自界说的window，并设置windowType摆列为 TYPE_DIALOG，这个是一个API10之后有的范例。
通过调用loadContent(path: string, storage: LocalStorage, callback: AsyncCallback<void>): void创建一个指定的页面作为这个window的根视图，我们背面自己的自界说弹框组件，都是加载到这个页面中。第二个参数storage也很重要，因为通过该方法指定了页面，但是无法将自界说的参数直接传入到页面中，以是通过LocalStorage举行中转传值。
在需要举行传值的属性中，非常重要的是一个entry?: CustomBuilder自界说组件的属性，因为我们究竟是要封装一个通用的类，去支持你传入任意的自界说视图。这里有个非常重要的点：在class中传入的这个属性，是一个代码块，内里是我们自界说的组件代码，但是我们无法在page中，直接去执行这个代码块，来获取到相应的布局。这里其实还需要在page的代码中新增一个属性@BuilderParam entryView: CustomBuilder，这个应该很熟悉，就是假如我们是直接初始化一个包含这个属性的组件时，就可以直接传入一个@Builder function()自界说组件，而且内部可以直接使用。那我们这里需要做的就是，在page的aboutToAppear中，将我们传入的参数，赋值给这个页面声明的属性，如许就可以在布局中去加载这个布局了。
传入到页面中的参数，还可以包含布局/动画等参数，这里只实现了布局，后续可以继续完满动画相关方法
最后在传入这个布局代码的时候，假如有自界说的点击事故，需要注意this的绑定当前调用方。

代码

公共模块：

[/code] [code]import { window } from '@kit.ArkUI'
import { common } from '@kit.AbilityKit'
export class HDEntryKit {
static display(use: EKAttributes) {
HDWindowProvider.instance().display(use)
}
static dismiss(complete?: (() => void)) {
HDWindowProvider.instance().dismiss(complete)
}
}
class HDWindowProvider {
private static windowProvider: HDWindowProvider
context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;
windowName: string = "HDEntryWindow"
static instance() {
if (!HDWindowProvider.windowProvider) {
HDWindowProvider.windowProvider = new HDWindowProvider();
}
return HDWindowProvider.windowProvider;
}
display(use: EKAttributes) {
let windowClass: window.Window
window.createWindow({
name: this.windowName,
windowType: window.WindowType.TYPE_DIALOG,
ctx: this.context
}, (err, data) => {
if (err.code == 0) {
windowClass = data
windowClass.setWindowLayoutFullScreen(true)
let bundleName = this.context.applicationInfo.name
let page = `@bundle:${bundleName}/uicomponents/ets/HDEntryKit/HDEntryPage`
let storage: LocalStorage = new LocalStorage()
storage.setOrCreate('use', use)
windowClass.loadContent(page, storage, err => {
if (err.code == 0) {
windowClass.setWindowBackgroundColor(use.backgroundColor?.toString())
}
})
windowClass.showWindow(() => {
})
}
})
}
dismiss(complete?: (() => void)) {
window.findWindow(this.windowName).destroyWindow((err, e) => {
if (err.code == 0 && complete) {
complete()
}
})
}
}
export class Size {
width: Length | null = null
height: Length | null = null
margin: Length | Padding = 0
}
export class EKAttributes {
name?: string
entry?: CustomBuilder
position: FlexAlign = FlexAlign.Center
backgroundColor: ResourceColor = "#99000000"
displayDuration: number = 1000
size: Size = new Size()
}

复制代码

import { EKAttributes, HDEntryKit } from './HDEntryKit'
let storage = LocalStorage.getShared()
@Entry(storage)
@Component
struct HDEntryPage {
@BuilderParam entryView: CustomBuilder
@LocalStorageProp('use') use: EKAttributes = new EKAttributes()
build() {
Column() {
Row() {
Column() {
if (this.entryView) {
this.entryView()
}
}
.width('100%')
.onClick(e => {})
}
.width(this.use.size.width)
.height(this.use.size.height)
.margin(this.use.size.margin)
.backgroundColor(Color.Blue)
}
.width('100%')
.height('100%')
.justifyContent(this.use.position)
.onClick(event => {
HDEntryKit.dismiss()
})
}
aboutToAppear(): void {
this.entryView = this.use.entry
}

复制代码

调用方：

/// 弹框的配置
let use = new EKAttributes()
use.size.height = 100
use.size.margin = 20
use.position = FlexAlign.End
use.entry = this.text.bind(this)
HDEntryKit.display(use)
/// 自定义的弹框组件
@Builder text() {
Row() {
Text("123")
.backgroundColor('#ff0000')
.onClick(() => {
this.test()
})
}
.width('100%')
.justifyContent(FlexAlign.Start)
}
/// 弹框组件中的页面跳转事件
test() {
HDEntryKit.dismiss(() => {
let bundleName = this.context.applicationInfo.name
let loginPage = `@bundle:${bundleName}/login/ets/pages/LoginRegisterPage`
router.pushUrl({url: loginPage})
})
}

复制代码

注意

通过自界说window方法弹出页面后，假如在调用router.push，则是默认在这个自界说的window举行页面跳转，当你销毁这个window的时候，打开的页面都会被关闭。以是，在demo里是在window销毁后，再举行页面跳转

最后

有许多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点把握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。以是有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习黑白常有须要的。
这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必把握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。
希望这一份鸿蒙学习资料能够给大家带来资助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！
假如你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感爱好以及转行人员，可以直接领取这份资料
获取这份完备版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料
鸿蒙（HarmonyOS NEXT）最新学习路线

HarmonOS底子技能

HarmonOS就业必备技能
HarmonOS多媒体技术

鸿蒙NaPi组件进阶

HarmonOS高级技能

初识HarmonOS内核
实战就业级装备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布条记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。
获取以上完备版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料
《鸿蒙 (OpenHarmony)开发入门教学视频》