HarmonyOS 6 ArkUI ActionSheet 底部操作弹窗使用文档

文章目录完整示例代码结构参数详细说明1. 文案相关参数2. 弹窗行为参数3. 位置布局参数4. sheets 选项数组5. confirm 确认按钮6. 事件回调运行效果说明总结完整示例// ActionSheetDemo.ets Entry Component struct ActionSheetDemo { build() { Column({ space: 20 }) { Button(打开 ActionSheet) .width(200) .height(50) .onClick(() { // 调用当前UI上下文打开ActionSheet this.getUIContext().showActionSheet({ // 标题、副标题、内容 title: 选择操作, subtitle: 请选择一项, message: 这是一个列表选择弹窗, // 点击遮罩自动关闭 autoCancel: true, // 对齐底部向上偏移10vp alignment: DialogAlignment.Bottom, offset: { dx: 0, dy: -10 }, // 选项列表 sheets: [ { title: 拍照, action: () { console.info(点击拍照) } }, { title: 从相册选择, action: () { console.info(点击从相册选择) } }, { title: 取消, action: () { console.info(点击取消) } } ], // 确认按钮 confirm: { value: 确定, action: () { console.info(点击确认按钮) } }, // 关闭回调 cancel: () { console.info(ActionSheet 已关闭) }, // 拦截关闭事件可选 onWillDismiss: (dismissAction) { console.info(关闭原因 dismissAction.reason); dismissAction.dismiss(); // 执行关闭 } }) }) } .width(100%) .height(100%) .justifyContent(FlexAlign.Center) } }运行效果如图代码结构页面入口Entry标识为页面入口Component自定义组件根布局Column垂直布局宽高铺满全屏内容垂直居中触发按钮固定宽高的 Button绑定点击事件作为弹窗触发入口调用方式采用官方推荐this.getUIContext().showActionSheet()唤起弹窗配置项包含文案配置、行为配置、位置配置、选项列表、按钮配置、全生命周期回调。参数详细说明1. 文案相关参数参数说明titleActionSheet 主标题subtitle弹窗副标题message弹窗补充描述文本2. 弹窗行为参数autoCancel是否点击遮罩层自动关闭弹窗true 为允许关闭。3. 位置布局参数alignment弹窗对齐方式当前设置DialogAlignment.Bottom底部弹出offset弹窗偏移量dx 水平偏移、dy 垂直偏移示例向上偏移 10vp。4. sheets 选项数组为操作选项列表数组每一项结构title选项展示文字action选项点击触发的回调事件可编写业务逻辑。5. confirm 确认按钮value确认按钮显示文字action确认按钮点击回调。6. 事件回调cancel弹窗被关闭遮罩点击、主动关闭时触发onWillDismiss弹窗即将关闭的拦截回调可获取关闭原因手动控制是否关闭弹窗。运行效果说明进入页面默认展示「打开 ActionSheet」按钮点击按钮从页面底部弹出带标题、副标题、选项列表、确定按钮的操作菜单分别点击拍照、从相册选择、取消、确定按钮控制台打印对应日志点击弹窗外部遮罩层可自动关闭弹窗并触发 cancel 回调弹窗关闭前触发onWillDismiss回调可捕获关闭原因。总结必须通过页面 UI 上下文getUIContext()调用不支持全局直接调用最低适配 API 11低版本需做兼容处理onWillDismiss中若不调用dismissAction.dismiss()弹窗将无法正常关闭页面销毁时无需手动销毁 ActionSheetUI 上下文自动回收资源。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力