企业官网建设流程全解析

完整代码

import { ConfirmDialog } from '@kit.ArkUI'; @Entry @Component struct Index { isChecked: boolean = false; dialogControllerCheckBox: CustomDialogController = new CustomDialogController({ builder: ConfirmDialog({ title: '文本标题', content: '文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本', // 勾选框选中状态 isChecked: this.isChecked, // 勾选框说明文本 checkTips: '禁止后不再提示', primaryButton: { value: '禁止', action: () => {}, }, secondaryButton: { value: '允许', action: () => { this.isChecked = false console.info('Callback when the second button is clicked') } }, onCheckedChange: () => { console.info('Callback when the checkbox is clicked') }, }), autoCancel: true, alignment: DialogAlignment.Bottom }) build() { Row() { Stack() { Column(){ Button("文本+勾选弹出框") .width(96) .height(40) .onClick(() => { this.dialogControllerCheckBox.open() }) } .margin({bottom: 300}) } .align(Alignment.Bottom) .width('100%') .height('100%') } .backgroundImageSize({ width: '100%', height: '100%' }) .height('100%') } }

运行效果如图：

功能说明

本示例实现带勾选框的文本确认弹窗：

1. 顶部显示标题，中间为文本说明
2. 底部包含勾选框+提示文字
3. 双按钮：禁止 / 允许
4. 支持勾选状态监听、按钮回调、状态重置
5. 点击遮罩层可自动关闭
6. 弹窗默认在底部弹出

核心参数

1. ConfirmDialog 文本+勾选专属参数

2. 控制器参数

3. ButtonOptions 按钮参数

代码结构说明

1. 导入
   从@kit.ArkUI导入 ConfirmDialog。

2. 状态管理
   isChecked: boolean控制勾选框选中状态。

3. 弹窗控制器
   使用CustomDialogController管理弹窗生命周期。

4. 页面布局
   按钮固定在页面底部，点击调用open()打开弹窗。

总结

1. ConfirmDialog 为信息确认类弹窗，适合需要用户明确同意/禁止的场景。
2. isChecked由@Prop装饰，支持外部状态同步。
3. checkTips用于说明勾选含义，如“不再提示”“同意协议”等。
4. onCheckedChange是官方推荐的勾选监听事件。
5. autoCancel默认可点击遮罩关闭，提升交互体验。
6. 弹窗对齐方式alignment支持 Bottom/Center/Top 等。

如果这篇文章对你有帮助，欢迎点赞、收藏、关注，你的支持是持续创作的动力