HarmonyOS 鸿蒙Next Dialog的构建和open只能在@Component中么,如何封装一个统一逻辑的Dialog

发布于 1周前 作者 sinazl 来自 鸿蒙OS

HarmonyOS 鸿蒙Next Dialog的构建和open只能在@Component中么,如何封装一个统一逻辑的Dialog

如何封装dialog,然后在不同的Component中进行复用?

2 回复

自定义的dialog可以通过export方式对外暴露:

@CustomDialog
export default struct CustomDialogExample {
@Link textValue: string
@Link inputValue: string
controller: CustomDialogController
// 若尝试在CustomDialog中传入多个其他的Controller,以实现在CustomDialog中打开另一个或另一些CustomDialog,那么此处需要将指向自己的controller放在最后
cancel: () => void
confirm: () => void

build() {
Column() {
Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 })
TextInput({ placeholder: '', text: this.textValue }).height(60).width('90%')
.onChange((value: string) => {
this.textValue = value
})
Text('Whether to change a text?').fontSize(16).margin({ bottom: 10 })
Flex({ justifyContent: FlexAlign.SpaceAround }) {
Button('cancel')
.onClick(() => {
this.controller.close()
this.cancel()
}).backgroundColor(0xffffff).fontColor(Color.Black)
Button('confirm')
.onClick(() => {
this.inputValue = this.textValue
this.controller.close()
this.confirm()
}).backgroundColor(0xffffff).fontColor(Color.Red)
}.margin({ bottom: 10 })
}
// dialog默认的borderRadius为24vp,如果需要使用border属性,请和borderRadius属性一起使用
}
}

2.在需要用到dialog的@Component中import引入并初始化:

import CustomDialogExample from './CustomDialogExample';

@Entry
[@Component](/user/Component)
struct CustomDialogUser {
@State textValue: string = ''
@State inputValue: string = 'click me'
dialogController: CustomDialogController = new CustomDialogController({
builder: CustomDialogExample({
cancel: this.onCancel,
confirm: this.onAccept,
textValue: $textValue,
inputValue: $inputValue
}),
cancel: this.existApp,
autoCancel: true,
alignment: DialogAlignment.Default,
offset: { dx: 0, dy: -20 },
gridCount: 4,
customStyle: false
})

// 在自定义组件即将析构销毁时将dialogControlle删除和置空
aboutToDisappear() {
delete this.dialogController, // 删除dialogController
this.dialogController = undefined // 将dialogController置空
}

onCancel() {
console.info('Callback when the first button is clicked')
}

onAccept() {
console.info('Callback when the second button is clicked')
}

existApp() {
console.info('Click the callback in the blank area')
}

build() {
Column() {
Button(this.inputValue)
.onClick(() => {
if (this.dialogController != undefined) {
this.dialogController.open()
}
}).backgroundColor(0x317aff)
}.width('100%').margin({ top: 5 })
}
}

更多关于HarmonyOS 鸿蒙Next Dialog的构建和open只能在@Component中么,如何封装一个统一逻辑的Dialog的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HarmonyOS 鸿蒙Next Dialog的构建和open操作不一定非要在@Component中。虽然Dialog通常是在组件(如Page或Ability)中创建和显示的,但你可以通过封装一个独立的类来实现Dialog的统一逻辑管理。

为了封装一个统一逻辑的Dialog,你可以创建一个独立的类(非@Component),在这个类中定义Dialog的创建、配置和显示方法。通过传递必要的上下文(如Ability或Page的实例)到这个类中,你可以在任何需要的地方调用这些方法以显示Dialog。

具体实现步骤如下:

  1. 创建一个非@Component的Java类,用于封装Dialog的逻辑。
  2. 在这个类中定义静态或实例方法,用于创建Dialog、设置Dialog的属性(如标题、内容、按钮等)。
  3. 在方法中接受一个Context参数(如Ability或Page的实例),用于显示Dialog。
  4. 调用Context的相关方法(如startAbilityForResult等)来显示Dialog。

这样,你就可以在应用的任何地方通过调用这个封装类的方法来显示Dialog,而无需在@Component中直接编写Dialog的创建和显示逻辑。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部