HarmonyOS 6 EditableTitleBar 右侧图标自定义标题栏使用文档

文章目录概述依赖引入核心属性与事件1. 左侧图标配置2. 基础标题3. 右侧自定义菜单4. 业务回调事件示例解析场景1左侧取消图标无右侧拓展菜单场景2左侧返回图标自定义禁用右侧图标代码总结概述EditableTitleBar是鸿蒙ArkUI提供的编辑类专属标题栏组件适配编辑页面场景支持左侧图标样式切换、右侧菜单图标自定义配置内置取消、保存业务回调事件可快速搭建编辑页标准导航栏满足页面返回、编辑取消、内容保存、拓展菜单操作等交互需求。依赖引入import { EditableLeftIconType, EditableTitleBar, Prompt } from kit.ArkUI;核心属性与事件1. 左侧图标配置leftIconStyle枚举类型EditableLeftIconType控制左侧展示图标Cancel取消图标样式Back返回图标样式2. 基础标题title字符串类型设置标题栏展示文本3. 右侧自定义菜单menuItems图标菜单数组支持批量配置右侧功能图标value系统图标资源路径isEnabled图标是否可点击false为禁用置灰action图标点击触发回调4. 业务回调事件onCancel左侧取消图标点击回调onSave右侧保存按钮点击回调示例解析场景1左侧取消图标无右侧拓展菜单左侧展示取消按钮仅保留基础取消、保存操作无额外右侧图标EditableTitleBar({ leftIconStyle: EditableLeftIconType.Cancel, title: 编辑页面, menuItems: [], onCancel: () { Prompt.showToast({ message: on cancel }); }, onSave: () { Prompt.showToast({ message: on save }); } })场景2左侧返回图标自定义禁用右侧图标左侧切换为返回样式新增右侧自定义图标并设置图标禁用不可点击EditableTitleBar({ leftIconStyle: EditableLeftIconType.Back, title: 编辑页面, menuItems: [ { value: $r(sys.media.ohos_ic_public_cancel), isEnabled: false, action: () { Prompt.showToast({ message: show toast index 2 }); } } ], onSave: () { Prompt.showToast({ message: on save }) } })代码import { EditableLeftIconType, EditableTitleBar, Prompt } from kit.ArkUI; Entry Component struct Index { build() { Row() { Column() { Divider().height(2).color(0xCCCCCC) // 左侧取消按钮右侧保存按钮。 EditableTitleBar({ leftIconStyle: EditableLeftIconType.Cancel, title: 编辑页面, menuItems: [], onCancel: () { Prompt.showToast({ message: on cancel }); }, onSave: () { Prompt.showToast({ message: on save }); } }) Divider().height(2).color(0xCCCCCC) // 左侧返回按钮右侧自定义取消按钮disabled、保存按钮。 EditableTitleBar({ leftIconStyle: EditableLeftIconType.Back, title: 编辑页面, menuItems: [ { value: $r(sys.media.ohos_ic_public_cancel), isEnabled: false, action: () { Prompt.showToast({ message: show toast index 2 }); } } ], onSave: () { Prompt.showToast({ message: on save }) } }) Divider().height(2).color(0xCCCCCC) }.width(100%) }.height(100%) } }运行效果如图总结组件适用于编辑类页面常规展示页面不推荐使用该标题栏左侧图标仅支持取消、返回两种固定样式不可自定义图标右侧菜单数组可灵活增减图标通过isEnabled控制按钮可用状态点击事件搭配Prompt弹窗可快速实现操作反馈仅支持Stage开发模型适配手机、平板设备穿戴设备不兼容如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力