1# ComposeTitleBar 2 3 4一种普通标题栏，支持设置标题、头像（可选）和副标题（可选），可用于一级页面、二级及其以上界面配置返回键。 5 6 7> **说明：** 8> 9> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 10> 11> 该组件不支持在Wearable设备上使用。 12 13 14## 导入模块 15 16``` 17import { ComposeTitleBar } from '@kit.ArkUI'; 18``` 19 20 21## 子组件 22 23无 24 25## 属性 26不支持[通用属性](ts-component-general-attributes.md)。 27 28## ComposeTitleBar 29 30ComposeTitleBar({item?: ComposeTitleBarMenuItem, title: ResourceStr, subtitle?: ResourceStr, menuItems?: Array<ComposeTitleBarMenuItem>}) 31 32**装饰器类型：**\@Component 33 34**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 35 36**系统能力：** SystemCapability.ArkUI.ArkUI.Full 37 38| 名称 | 类型 | 必填 | 说明 | 39| -------- | -------- | -------- | -------- | 40| item | [ComposeTitleBarMenuItem](#composetitlebarmenuitem) | 否 | 用于左侧头像的单个菜单项目。 | 41| title | [ResourceStr](ts-types.md#resourcestr) | 是 | 标题。 | 42| subtitle | [ResourceStr](ts-types.md#resourcestr) | 否 | 副标题。 | 43| menuItems | Array<[ComposeTitleBarMenuItem](#composetitlebarmenuitem)> | 否 | 右侧菜单项目列表。 | 44 45> **说明：** 46> 47> 入参对象不可为undefined，即`ComposeTitleBar(undefined)`。 48 49## ComposeTitleBarMenuItem 50 51**系统能力：** SystemCapability.ArkUI.ArkUI.Full 52 53| 名称 | 类型 | 必填 | 说明 | 54| -------- | -------- | -------- | -------- | 55| value | [ResourceStr](ts-types.md#resourcestr) | 是 | 图标资源。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 56| symbolStyle<sup>18+</sup> | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | 否 | Symbol图标资源，优先级大于value，item左侧头像不支持设置该属性。<br/>**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | 57| label<sup>13+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 图标标签描述。<br/>**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 | 58| isEnabled | boolean | 否 | 是否启用，默认禁用。<br> isEnabled为true时，表示为启用。<br> isEnabled为false时，表示为禁用。<br>item属性不支持触发isEnabled属性。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 59| action | () => void | 否 | 触发时的动作闭包，item属性不支持触发action事件。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 60| accessibilityLevel<sup>18+<sup> | string | 否 | 标题栏右侧自定义按钮无障碍重要性。用于控制当前项是否可被无障碍辅助服务所识别。<br/>支持的值为：<br/>"auto"：当前组件会转换'yes'。<br/>"yes"：当前组件可被无障碍辅助服务所识别。<br/>"no"：当前组件不可被无障碍辅助服务所识别。<br/>"no-hide-descendants"：当前组件及其所有子组件不可被无障碍辅助服务所识别。<br/>默认值："auto"。<br/>**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | 61| accessibilityText<sup>18+<sup> | ResourceStr | 否 | 标题栏右侧自定义按钮的无障碍文本属性。当组件不包含文本属性时，屏幕朗读选中此组件时不播报，使用者无法清楚地知道当前选中了什么组件。为了解决此场景，开发人员可为不包含文字信息的组件设置无障碍文本，当屏幕朗读选中此组件时播报无障碍文本的内容，帮助屏幕朗读的使用者清楚地知道自己选中了什么组件。<br/>默认值：有label默认值为当前项label属性内容，没有设置label时，默认值为“ ”。<br/>**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | 62| accessibilityDescription<sup>18+<sup> | ResourceStr | 否 | 标题栏右侧自定义按钮的无障碍描述。此描述用于向用户详细解释当前组件，开发人员应为组件的这一属性提供较为详尽的文本说明，以协助用户理解即将执行的操作及其可能产生的后果。特别是当这些后果无法仅从组件的属性和无障碍文本中直接获知时。如果组件同时具备文本属性和无障碍说明属性，当组件被选中时，系统将首先播报组件的文本属性，随后播报无障碍说明属性的内容。<br/>默认值为“单指双击即可执行”。<br/>**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | 63 64## 事件 65不支持[通用事件](ts-component-general-events.md)。 66 67## 示例 68 69### 示例1（简单的标题栏） 70该示例实现了简单的标题栏，带有返回箭头的标题栏和带有右侧菜单项目列表的标题栏。 71```ts 72import { ComposeTitleBar, Prompt, ComposeTitleBarMenuItem } from '@kit.ArkUI'; 73 74@Entry 75@Component 76struct Index { 77 //定义右侧菜单项目列表 78 private menuItems: Array<ComposeTitleBarMenuItem> = [ 79 { 80 //菜单图片资源 81 value: $r('sys.media.ohos_save_button_filled'), 82 //启用图标 83 isEnabled: true, 84 //点击菜单时触发事件 85 action: () => Prompt.showToast({ message: "show toast index 1" }) 86 }, 87 { 88 value: $r('sys.media.ohos_ic_public_copy'), 89 isEnabled: true, 90 action: () => Prompt.showToast({ message: "show toast index 1" }) 91 }, 92 { 93 value: $r('sys.media.ohos_ic_public_edit'), 94 isEnabled: true, 95 action: () => Prompt.showToast({ message: "show toast index 1" }) 96 }, 97 { 98 value: $r('sys.media.ohos_ic_public_remove'), 99 isEnabled: true, 100 action: () => Prompt.showToast({ message: "show toast index 1" }) 101 }, 102 ] 103 104 build() { 105 Row() { 106 Column() { 107 //分割线 108 Divider().height(2).color(0xCCCCCC) 109 ComposeTitleBar({ 110 title: "标题", 111 subtitle: "副标题", 112 menuItems: this.menuItems.slice(0, 1), 113 }) 114 Divider().height(2).color(0xCCCCCC) 115 ComposeTitleBar({ 116 title: "标题", 117 subtitle: "副标题", 118 menuItems: this.menuItems.slice(0, 2), 119 }) 120 Divider().height(2).color(0xCCCCCC) 121 ComposeTitleBar({ 122 title: "标题", 123 subtitle: "副标题", 124 menuItems: this.menuItems, 125 }) 126 Divider().height(2).color(0xCCCCCC) 127 //定义带头像的标题栏 128 ComposeTitleBar({ 129 menuItems: [{ isEnabled: true, value: $r('sys.media.ohos_save_button_filled'), 130 action: () => Prompt.showToast({ message: "show toast index 1" }) 131 }], 132 title: "标题", 133 subtitle: "副标题", 134 item: { isEnabled: true, value: $r('sys.media.ohos_app_icon') } 135 }) 136 Divider().height(2).color(0xCCCCCC) 137 } 138 }.height('100%') 139 } 140} 141``` 142 143 144 145### 示例2（右侧自定义按钮播报） 146该示例通过设置标题栏右侧自定义按钮属性accessibilityText、accessibilityDescription、accessibilityLevel自定义屏幕朗读播报文本。 147```ts 148import { ComposeTitleBar, Prompt, ComposeTitleBarMenuItem } from '@kit.ArkUI'; 149 150@Entry 151@Component 152struct Index { 153 //定义右侧菜单项目列表 154 private menuItems: Array<ComposeTitleBarMenuItem> = [ 155 { 156 //菜单图片资源 157 value: $r('sys.media.ohos_save_button_filled'), 158 //启用图标 159 isEnabled: true, 160 //点击菜单时触发事件 161 action: () => Prompt.showToast({ message: "show toast index 1" }), 162 //屏幕朗读播报文本，优先级比label高 163 accessibilityText: '保存', 164 //屏幕朗读是否可以聚焦到 165 accessibilityLevel: 'yes', 166 //屏幕朗读最后播报的描述文本 167 accessibilityDescription: '点击操作保存图标' 168 }, 169 { 170 value: $r('sys.media.ohos_ic_public_copy'), 171 isEnabled: true, 172 action: () => Prompt.showToast({ message: "show toast index 1" }), 173 accessibilityText: '复制', 174 //此处为no，屏幕朗读不聚焦 175 accessibilityLevel: 'no', 176 accessibilityDescription: '点击操作复制图标' 177 }, 178 { 179 value: $r('sys.media.ohos_ic_public_edit'), 180 isEnabled: true, 181 action: () => Prompt.showToast({ message: "show toast index 1" }), 182 accessibilityText: '编辑', 183 accessibilityLevel: 'yes', 184 accessibilityDescription: '点击操作编辑图标' 185 }, 186 { 187 value: $r('sys.media.ohos_ic_public_remove'), 188 isEnabled: true, 189 action: () => Prompt.showToast({ message: "show toast index 1" }), 190 accessibilityText: '移除', 191 accessibilityLevel: 'yes', 192 accessibilityDescription: '点击操作移除图标' 193 }, 194 ] 195 196 build() { 197 Row() { 198 Column() { 199 //分割线 200 Divider().height(2).color(0xCCCCCC) 201 ComposeTitleBar({ 202 title: "标题", 203 subtitle: "副标题", 204 menuItems: this.menuItems.slice(0, 1), 205 }) 206 Divider().height(2).color(0xCCCCCC) 207 ComposeTitleBar({ 208 title: "标题", 209 subtitle: "副标题", 210 menuItems: this.menuItems.slice(0, 2), 211 }) 212 Divider().height(2).color(0xCCCCCC) 213 ComposeTitleBar({ 214 title: "标题", 215 subtitle: "副标题", 216 menuItems: this.menuItems, 217 }) 218 Divider().height(2).color(0xCCCCCC) 219 //定义带头像的标题栏 220 ComposeTitleBar({ 221 menuItems: [{ isEnabled: true, value: $r('sys.media.ohos_save_button_filled'), 222 action: () => Prompt.showToast({ message: "show toast index 1" }) 223 }], 224 title: "标题", 225 subtitle: "副标题", 226 item: { isEnabled: true, value: $r('sys.media.ohos_app_icon') } 227 }) 228 Divider().height(2).color(0xCCCCCC) 229 } 230 }.height('100%') 231 } 232} 233``` 234 235 236 237### 示例3（设置Symbol类型图标） 238 239该示例通过设置ComposeTitleBarMenuItem的属性symbolStyle，展示了自定义Symbol类型图标。 240 241```ts 242import { ComposeTitleBar, Prompt, ComposeTitleBarMenuItem, SymbolGlyphModifier } from '@kit.ArkUI'; 243 244@Entry 245@Component 246struct Index { 247 //定义右侧菜单项目列表 248 private menuItems: Array<ComposeTitleBarMenuItem> = [ 249 { 250 //菜单图片资源 251 value: $r('sys.symbol.house'), 252 //菜单symbol图标 253 symbolStyle: new SymbolGlyphModifier($r('sys.symbol.bell')).fontColor([Color.Red]), 254 //启用图标 255 isEnabled: true, 256 //点击菜单时触发事件 257 action: () => Prompt.showToast({ message: "show toast index 1" }) 258 }, 259 { 260 value: $r('sys.symbol.house'), 261 isEnabled: true, 262 action: () => Prompt.showToast({ message: "show toast index 1" }) 263 }, 264 { 265 value: $r('sys.symbol.car'), 266 symbolStyle: new SymbolGlyphModifier($r('sys.symbol.heart')).fontColor([Color.Pink]), 267 isEnabled: true, 268 action: () => Prompt.showToast({ message: "show toast index 1" }) 269 }, 270 { 271 value: $r('sys.symbol.car'), 272 isEnabled: true, 273 action: () => Prompt.showToast({ message: "show toast index 1" }) 274 }, 275 ] 276 277 build() { 278 Row() { 279 Column() { 280 //分割线 281 Divider().height(2).color(0xCCCCCC) 282 ComposeTitleBar({ 283 title: "标题", 284 subtitle: "副标题", 285 menuItems: this.menuItems.slice(0, 1), 286 }) 287 Divider().height(2).color(0xCCCCCC) 288 ComposeTitleBar({ 289 title: "标题", 290 subtitle: "副标题", 291 menuItems: this.menuItems.slice(0, 2), 292 }) 293 Divider().height(2).color(0xCCCCCC) 294 ComposeTitleBar({ 295 title: "标题", 296 subtitle: "副标题", 297 menuItems: this.menuItems, 298 }) 299 Divider().height(2).color(0xCCCCCC) 300 //定义带头像的标题栏 301 ComposeTitleBar({ 302 menuItems: [{ isEnabled: true, value: $r('sys.symbol.heart'), 303 action: () => Prompt.showToast({ message: "show toast index 1" }) 304 }], 305 title: "标题", 306 subtitle: "副标题", 307 item: { isEnabled: true, value: $r('sys.media.ohos_app_icon') } 308 }) 309 Divider().height(2).color(0xCCCCCC) 310 } 311 }.height('100%') 312 } 313} 314``` 315 316 317
