文章目录模块导入核心API参数说明1. 宽度控制属性2. 结构配置类型3. 通用功能参数完整代码代码分段解析1. 外层容器布局2. 自定义宽度核心配置3. 图标配置项4. 长文本正文配置5. 关闭按钮状态6. 底部操作按钮运行效果总结模块导入使用组件及配套参数类型引入对应UI依赖包import { Popup, PopupTextOptions, PopupButtonOptions, PopupIconOptions } from kit.ArkUI;核心API参数说明1. 宽度控制属性属性名类型作用maxWidthLength限制弹窗最大展示宽度支持数值、百分比单位超出宽度文本自动换行2. 结构配置类型类型用途PopupIconOptions配置弹窗图标尺寸、填充色、圆角、图片资源PopupTextOptions配置弹窗正文文本字号、字体颜色、文案内容PopupButtonOptions定义底部按钮文字、点击回调、文字样式3. 通用功能参数参数说明showClose控制右上角关闭按钮显示隐藏onClose关闭按钮点击触发回调事件buttons弹窗底部操作按钮组最多支持两个按钮完整代码import { Popup, PopupTextOptions, PopupButtonOptions, PopupIconOptions } from kit.ArkUI; Entry Component struct PopupPage { State currentDirection: Direction Direction.Rtl; build() { Row() { // popup 自定义高级组件 Popup({ // 设置自定义宽度 maxWidth: 50%, // PopupIconOptions 类型设置图标内容 icon: { // $r(app.media.startIcon)需要替换为开发者所需的图像资源文件。 image: $r(app.media.startIcon), width: 32, height: 32, fillColor: Color.White, borderRadius: 16, } as PopupIconOptions, // PopupTextOptions类型设置文字内容 message: { text: This is the message,This is the message,This is the message,This is the message, fontSize: 15, fontColor: Color.Black } as PopupTextOptions, showClose: false, onClose: () { console.info(close Button click); }, // PopupButtonOptions类型设置按钮内容 buttons: [{ text: confirm, action: () { console.info(confirm button click); }, fontSize: 15, fontColor: Color.Black, }, { text: cancel, action: () { console.info(cancel button click); }, fontSize: 15, fontColor: Color.Black },] as [PopupButtonOptions?, PopupButtonOptions?] }) } .width(400) .height(200) .borderWidth(2) .justifyContent(FlexAlign.Center) } }运行效果如图代码分段解析1. 外层容器布局Row() .width(400) .height(200) .borderWidth(2) .justifyContent(FlexAlign.Center)设置固定尺寸外层容器并添加边框弹窗在容器内居中展示作为宽度参照载体。2. 自定义宽度核心配置maxWidth: 50%限定弹窗最大宽度为父容器的50%文本内容长度超出该宽度时自动换行展示避免弹窗无限拉伸。3. 图标配置项icon: { image: $r(app.media.startIcon), width: 32, height: 32, fillColor: Color.White, borderRadius: 16, } as PopupIconOptions配置圆形样式图标设定固定尺寸与填充颜色图标展示在弹窗顶部区域。4. 长文本正文配置message: { text: This is the message,This is the message,This is the message,This is the message, fontSize: 15, fontColor: Color.Black } as PopupTextOptions填入超长测试文本受最大宽度约束自动分行排布适配弹窗窄宽度展示形态。5. 关闭按钮状态showClose: false, onClose: () { console.info(close Button click); }隐藏弹窗右上角关闭按钮保留关闭回调函数可按需修改参数恢复显示。6. 底部操作按钮buttons: [{...},{...}]配置确认、取消两个操作按钮绑定独立点击事件点击后控制台打印对应日志信息。运行效果弹窗最大宽度固定为父容器一半整体尺寸紧凑规整超长正文文本受宽度限制自动换行排版整齐不溢出边界顶部展示圆角图标底部横向排列两个功能按钮无关闭控件点击按钮可触发对应日志输出。总结宽度单位支持vp、百分比等格式百分比取值参照直接父级容器尺寸弹窗按钮数量上限为2个多余配置不会生效资源路径app.media.startIcon需替换为项目内有效图片资源宽度设置过小会自动挤压文本、按钮布局需结合文案长度合理配置组件适配手机、平板、大屏设备不支持穿戴设备。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力