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