一、自定义弹出框的基本用法

1. 使用@CustomDialog装饰器：

• 自定义弹出框需要使用 @CustomDialog 装饰器来装饰一个结构体（struct），该结构体定义了弹出框的内容和布局。

2. 定义弹出框内容：

• 在被 @CustomDialog 装饰的结构体中，通过 build 方法定义弹出框的内容。可以使用ArkTS提供的UI组件（如Text、Button等）来构建弹出框的界面。

3. 创建CustomDialogController：

• CustomDialogController 是用于控制弹出框显示的类。需要在页面或组件中创建CustomDialogController 的实例，并将自定义弹出框的结构体作为参数传递给CustomDialogController 的构造函数。

4. 显示弹出框：

• 通过调用 CustomDialogController 实例的 open 方法来显示弹出框。

二、自定义弹出框的示例代码

@CustomDialog

struct CustomDialogExample {

controller: CustomDialogController

build() {

Column() {

Text("是否退出?").fontSize(30).margin({ top: 60 })

Row() {

Button('是')

.width('50%')

.height(40)

.backgroundColor(Color.Blue)

.fontColor(Color.White)

.fontSize(18)

.textAlign(TextAlign.Center)

.onClick(() => {

this.controller.close()

// 执行“是”按钮的回调逻辑

})

Button('否')

.width('50%')

.height(40)

.backgroundColor(Color.Gray)

.fontColor(Color.White)

.fontSize(18)

.textAlign(TextAlign.Center)

.onClick(() => {

this.controller.close()

// 执行“否”按钮的回调逻辑

})

}.backgroundColor(Color.Red)

}.width('100%').height(200)

}

}

@Entry

@Component

struct DialogExample {

dialogController: CustomDialogController = new CustomDialogController({

builder: CustomDialogExample({})

})

build() {

Flex({ justifyContent: FlexAlign.Center }) {

Button('点击我显示弹出框')

.onClick(() => {

this.dialogController.open()

})

}

}

}

三、自定义弹出框的进阶用法

1. 添加回调方法：

• 可以为自定义弹出框的按钮添加回调方法，以便在按钮被点击时执行特定的逻辑。这可以通过在创建 CustomDialogController 实例时，将回调方法作为参数传递给 builder 属性中的自定义弹出框结构体来实现。

2. 设置弹出框的对齐方式：

• 可以通过设置 CustomDialogController 实例的 alignment 属性来控制弹出框的对齐方式，如底部对齐、中间对齐等。

3. 自定义弹出框的样式：

• 可以使用ArkTS提供的样式属性（如颜色、字体大小、边距等）来自定义弹出框的样式，以满足应用的需求。

四、注意事项

1. 高度压缩：

• 当弹出框需要避让软键盘时，如果达到极限高度，弹出框的高度会被压缩。此时，如果外层容器的子组件设置了较大的固定高度，可能会导致内容超出屏幕显示范围。因此，在设计弹出框布局时需要注意这一点。

2. 弹窗使用场景：

• 自定义弹出框仅适用于简单提示场景，不能替代页面使用。如果需要更复杂的交互或内容展示，建议使用页面来实现。

3. 页面跳转时关闭弹窗：

• 在页面路由跳转时，如果开发者未调用 close 方法将自定义弹出框关闭，则弹窗将不会自动关闭。若需要在跳转页面时同步关闭弹窗，建议使用Navigation相关的API来实现。
• 综上所述，鸿蒙应用开发中ArkTS自定义弹出框是一个强大且灵活的功能，允许开发者根据应用需求创建具有特定样式和内容的弹出框。通过掌握基本用法和进阶技巧，开发者可以轻松实现自定义弹出框的创建和控制。