1# ComposeTitleBar 2 3 4一种普通标题栏，支持设置标题、头像（可选）和副标题（可选），可用于一级页面、二级及其以上界面配置返回键。 5 6 7> **说明：** 8> 9> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 10 11 12## 导入模块 13 14``` 15import { ComposeTitleBar } from '@kit.ArkUI' 16``` 17 18 19## 子组件 20 21无 22 23## 属性 24不支持[通用属性](ts-universal-attributes-size.md) 25 26## ComposeTitleBar 27 28ComposeTitleBar({item?: ComposeTitleBarMenuItem, title: ResourceStr, subtitle?: ResourceStr, menuItems?: Array<ComposeTitleBarMenuItem>}) 29 30**装饰器类型：**\@Component 31 32**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 33 34**系统能力：** SystemCapability.ArkUI.ArkUI.Full 35 36| 名称 | 类型 | 必填 | 说明 | 37| -------- | -------- | -------- | -------- | 38| item | [ComposeTitleBarMenuItem](#composetitlebarmenuitem) | 否 | 用于左侧头像的单个菜单项目。 | 39| title | [ResourceStr](ts-types.md#resourcestr) | 是 | 标题。 | 40| subtitle | [ResourceStr](ts-types.md#resourcestr) | 否 | 副标题。 | 41| menuItems | Array<[ComposeTitleBarMenuItem](#composetitlebarmenuitem)> | 否 | 右侧菜单项目列表。 | 42 43> **说明：** 44> 45> 入参对象不可为undefined，即`ComposeTitleBar(undefined)`。 46 47## ComposeTitleBarMenuItem 48 49**系统能力：** SystemCapability.ArkUI.ArkUI.Full 50 51| 名称 | 类型 | 必填 | 说明 | 52| -------- | -------- | -------- | -------- | 53| value | [ResourceStr](ts-types.md#resourcestr) | 是 | 图标资源。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 54| label<sup>13+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 图标标签描述。<br/>**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 | 55| isEnabled | boolean | 否 | 是否启用，默认禁用。<br> isEnabled为true时，表示为启用。<br> isEnabled为false时，表示为禁用。<br>item属性不支持触发isEnabled属性。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 56| action | () => void | 否 | 触发时的动作闭包，item属性不支持触发action事件。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 57 58## 事件 59不支持[通用事件](ts-universal-events-click.md) 60 61## 示例 62 63该示例实现了简单的标题栏，带有返回箭头的标题栏和带有右侧菜单项目列表的标题栏。 64```ts 65import { ComposeTitleBar, promptAction, ComposeTitleBarMenuItem } from '@kit.ArkUI' 66 67@Entry 68@Component 69struct Index { 70 //定义右侧菜单项目列表 71 private menuItems: Array<ComposeTitleBarMenuItem> = [ 72 { 73 //菜单图片资源 74 value: $r('sys.media.ohos_save_button_filled'), 75 //启用图标 76 isEnabled: true, 77 //点击菜单时触发事件 78 action: () => promptAction.showToast({ message: "show toast index 1" }) 79 }, 80 { 81 value: $r('sys.media.ohos_ic_public_copy'), 82 isEnabled: true, 83 action: () => promptAction.showToast({ message: "show toast index 1" }) 84 }, 85 { 86 value: $r('sys.media.ohos_ic_public_edit'), 87 isEnabled: true, 88 action: () => promptAction.showToast({ message: "show toast index 1" }) 89 }, 90 { 91 value: $r('sys.media.ohos_ic_public_remove'), 92 isEnabled: true, 93 action: () => promptAction.showToast({ message: "show toast index 1" }) 94 }, 95 ] 96 97 build() { 98 Row() { 99 Column() { 100 //分割线 101 Divider().height(2).color(0xCCCCCC) 102 ComposeTitleBar({ 103 title: "标题", 104 subtitle: "副标题", 105 menuItems: this.menuItems.slice(0, 1), 106 }) 107 Divider().height(2).color(0xCCCCCC) 108 ComposeTitleBar({ 109 title: "标题", 110 subtitle: "副标题", 111 menuItems: this.menuItems.slice(0, 2), 112 }) 113 Divider().height(2).color(0xCCCCCC) 114 ComposeTitleBar({ 115 title: "标题", 116 subtitle: "副标题", 117 menuItems: this.menuItems, 118 }) 119 Divider().height(2).color(0xCCCCCC) 120 //定义带头像的标题栏 121 ComposeTitleBar({ 122 menuItems: [{ isEnabled: true, value: $r('sys.media.ohos_save_button_filled'), 123 action: () => promptAction.showToast({ message: "show toast index 1" }) 124 }], 125 title: "标题", 126 subtitle: "副标题", 127 item: { isEnabled: true, value: $r('sys.media.ohos_app_icon') } 128 }) 129 Divider().height(2).color(0xCCCCCC) 130 } 131 }.height('100%') 132 } 133} 134``` 135 136
