1# SelectTitleBar 2 3 4下拉菜单标题栏包含一个下拉菜单，可用于页面之间的切换；可用于一级页面、二级及其以上界面（配置返回键）。 5 6 7> **说明：** 8> 9> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 10> 11> 该组件不支持在Wearable设备上使用。 12 13 14## 导入模块 15 16``` 17import { SelectTitleBar } from '@kit.ArkUI'; 18``` 19 20 21## 子组件 22 23无 24 25## 属性 26不支持[通用属性](ts-component-general-attributes.md)。 27 28## SelectTitleBar 29 30SelectTitleBar({selected: number, options: Array<SelectOption>, menuItems?: Array<SelectTitleBarMenuItem>, subtitle?: ResourceStr, badgeValue?: number, hidesBackButton?: boolean, onSelected?: (index: number) => void}) 31 32**装饰器类型：**\@Component 33 34**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 35 36**系统能力：** SystemCapability.ArkUI.ArkUI.Full 37 38| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 39| -------- | -------- | -------- | -------- | -------- | 40| selected | number | 是 | \@Prop | 当前选中项目的索引。<br>第一项的索引为0。如果不设置该属性，则默认值为0。 | 41| options | Array<[SelectOption](ts-basic-components-select.md#selectoption对象说明)> | 是 | - | 下拉菜单中的项目。 | 42| menuItems | Array<[SelectTitleBarMenuItem](#selecttitlebarmenuitem)> | 否 | - | 右侧菜单项目列表，定义标题栏右侧的菜单项目。 | 43| subtitle | [ResourceStr](ts-types.md#resourcestr) | 否 | - | 子标题。 | 44| badgeValue | number | 否 | - | 新事件标记。<br>取值范围：[-2147483648,2147483647]，超出范围时会加上或减去4294967296，使得值仍在范围内，非整数时会舍去小数部分取整数部分，如5.5取5。<br>**说明：** 小于等于0时不显示信息标记。<br>最大消息数99，超过最大消息时仅显示99+。超大数值属于异常值，不显示信息标记。 | 45| hidesBackButton | boolean | 否 | - | 是否隐藏左侧的返回箭头。<br>默认值：false。true：隐藏，false：显示。| 46| onSelected | (index: number) => void | 否 | - | 下拉菜单项目选中触发的回调函数，传入选中项的索引。 | 47 48> **说明：** 49> 50> 入参对象不可为undefined，即`SelectTitleBar(undefined)`。 51 52## SelectTitleBarMenuItem 53 54**系统能力：** SystemCapability.ArkUI.ArkUI.Full 55 56| 名称 | 类型 | 必填 | 说明 | 57| -------- | -------- | -------- | -------- | 58| value | [ResourceStr](ts-types.md#resourcestr) | 是 | 图标资源。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 59| symbolStyle<sup>18+</sup> | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | 否 | Symbol图标资源，优先级大于value。<br/>**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | 60| label<sup>13+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 图标标签描述。<br/>**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 | 61| isEnabled | boolean | 否 | 是否启用。<br>默认值：false。true：启用，false：禁用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 62| action | () => void | 否 | 触发时的动作闭包。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 63| accessibilityLevel<sup>18+<sup> | string | 否 | 标题栏右侧自定义按钮无障碍重要性。用于控制当前项是否可被无障碍辅助服务所识别。<br/>支持的值为：<br/>"auto"：当前组件会转换'yes'。<br/>"yes"：当前组件可被无障碍辅助服务所识别。<br/>"no"：当前组件不可被无障碍辅助服务所识别。<br/>"no-hide-descendants"：当前组件及其所有子组件不可被无障碍辅助服务所识别。<br/>默认值："auto"。<br/>**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | 64| accessibilityText<sup>18+<sup> | ResourceStr | 否 | 标题栏右侧自定义按钮的无障碍文本属性。当组件不包含文本属性时，屏幕朗读选中此组件时不播报，使用者无法清楚地知道当前选中了什么组件。为了解决此场景，开发人员可为不包含文字信息的组件设置无障碍文本，当屏幕朗读选中此组件时播报无障碍文本的内容，帮助屏幕朗读的使用者清楚地知道自己选中了什么组件。<br/>默认值：有label默认值为当前项label属性内容，没有设置label时，默认值为“ ”。<br/>**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | 65| accessibilityDescription<sup>18+<sup> | ResourceStr | 否 | 标题栏右侧自定义按钮的无障碍描述。此描述用于向用户详细解释当前组件，开发人员应为组件的这一属性提供较为详尽的文本说明，以协助用户理解即将执行的操作及其可能产生的后果。特别是当这些后果无法仅从组件的属性和无障碍文本中直接获知时。如果组件同时具备文本属性和无障碍说明属性，当组件被选中时，系统将首先播报组件的文本属性，随后播报无障碍说明属性的内容。<br/>默认值为“单指双击即可执行”。<br/>**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | 66 67## 事件 68不支持[通用事件](ts-component-general-events.md)。 69 70## 示例 71 72### 示例1（下拉菜单标题栏） 73该示例实现了简单的下拉菜单标题栏，带有返回箭头的下拉菜单标题栏和带有右侧菜单项目列表的下拉菜单标题栏。 74```ts 75import { SelectTitleBar, Prompt, SelectTitleBarMenuItem } from '@kit.ArkUI'; 76 77 78@Entry 79@Component 80struct Index { 81 // 定义右侧菜单项目列表 82 private menuItems: Array<SelectTitleBarMenuItem> = 83 [ 84 { 85 // 菜单图片资源 86 value: $r('sys.media.ohos_save_button_filled'), 87 // 启用图片 88 isEnabled: true, 89 // 点击菜单时触发事件 90 action: () => Prompt.showToast({ message: 'show toast index 1' }), 91 }, 92 { 93 value: $r('sys.media.ohos_ic_public_copy'), 94 isEnabled: true, 95 action: () => Prompt.showToast({ message: 'show toast index 2' }), 96 }, 97 { 98 value: $r('sys.media.ohos_ic_public_edit'), 99 isEnabled: true, 100 action: () => Prompt.showToast({ message: 'show toast index 3' }), 101 }, 102 { 103 value: $r('sys.media.ohos_ic_public_remove'), 104 isEnabled: true, 105 action: () => Prompt.showToast({ message: 'show toast index 4' }), 106 }, 107 ] 108 109 build() { 110 Row() { 111 Column() { 112 Divider().height(2).color(0xCCCCCC) 113 SelectTitleBar({ 114 // 定义下拉列表选项 115 options: [ 116 { value: '所有照片' }, 117 { value: '本地（设备）' }, 118 { value: '本地本地本地本地本地（储存卡）' } 119 ], 120 // 初始选择第一个下拉选项 121 selected: 0, 122 // 选中时触发函数 123 onSelected: (index) => Prompt.showToast({ message: 'page index ' + index }), 124 // 隐藏左侧返回箭头 125 hidesBackButton: true, 126 }) 127 Divider().height(2).color(0xCCCCCC) 128 SelectTitleBar({ 129 options: [ 130 { value: '所有照片' }, 131 { value: '本地（设备）' }, 132 { value: '本地本地本地本地本地（储存卡）' }, 133 ], 134 selected: 0, 135 onSelected: (index) => Prompt.showToast({ message: 'page index ' + index }), 136 hidesBackButton: false, 137 }) 138 Divider().height(2).color(0xCCCCCC) 139 SelectTitleBar({ 140 options: [ 141 { value: '所有照片' }, 142 { value: '本地（设备）' }, 143 { value: '本地本地本地本地本地（储存卡）' }, 144 ], 145 selected: 1, 146 onSelected: (index) => Prompt.showToast({ message: 'page index ' + index }), 147 subtitle: 'example@example.com', 148 }) 149 Divider().height(2).color(0xCCCCCC) 150 SelectTitleBar({ 151 options: [ 152 { value: '所有照片' }, 153 { value: '本地（设备）' }, 154 { value: '本地本地本地本地本地（储存卡）' }, 155 ], 156 selected: 1, 157 onSelected: (index) => Prompt.showToast({ message: 'page index ' + index }), 158 subtitle: 'example@example.com', 159 menuItems: [{ isEnabled: true, value: $r('sys.media.ohos_save_button_filled'), 160 action: () => Prompt.showToast({ message: 'show toast index 1' }), 161 }], 162 }) 163 Divider().height(2).color(0xCCCCCC) 164 SelectTitleBar({ 165 options: [ 166 { value: '所有照片' }, 167 { value: '本地（设备）' }, 168 { value: '本地本地本地本地本地（储存卡）' }, 169 ], 170 selected: 0, 171 onSelected: (index) => Prompt.showToast({ message: 'page index ' + index }), 172 subtitle: 'example@example.com', 173 menuItems: this.menuItems, 174 badgeValue: 99, 175 hidesBackButton: true, 176 }) 177 Divider().height(2).color(0xCCCCCC) 178 }.width('100%') 179 }.height('100%') 180 } 181} 182``` 183 184 185 186### 示例2（右侧自定义按钮播报） 187该示例通过设置标题栏右侧自定义按钮属性accessibilityText、accessibilityDescription、accessibilityLevel自定义屏幕朗读播报文本。 188```ts 189import { SelectTitleBar, Prompt, SelectTitleBarMenuItem } from '@kit.ArkUI'; 190 191@Entry 192@Component 193struct Index { 194 // 定义右侧菜单项目列表 195 private menuItems: Array<SelectTitleBarMenuItem> = 196 [ 197 { 198 // 菜单图片资源 199 value: $r('sys.media.ohos_save_button_filled'), 200 // 启用图片 201 isEnabled: true, 202 // 点击菜单时触发事件 203 action: () => Prompt.showToast({ message: 'show toast index 1' }), 204 // 屏幕朗读播报文本，优先级比label高 205 accessibilityText: '保存', 206 // 屏幕朗读是否可以聚焦到 207 accessibilityLevel: 'yes', 208 // 屏幕朗读最后播报的描述文本 209 accessibilityDescription: '点击操作保存图标', 210 }, 211 { 212 value: $r('sys.media.ohos_ic_public_copy'), 213 isEnabled: true, 214 action: () => Prompt.showToast({ message: 'show toast index 2' }), 215 accessibilityText: '复制', 216 // 此处为no，屏幕朗读不聚焦 217 accessibilityLevel: 'no', 218 accessibilityDescription: '点击操作复制图标', 219 }, 220 { 221 value: $r('sys.media.ohos_ic_public_edit'), 222 isEnabled: true, 223 action: () => Prompt.showToast({ message: 'show toast index 3' }), 224 accessibilityText: '编辑', 225 accessibilityLevel: 'yes', 226 accessibilityDescription: '点击操作编辑图标', 227 }, 228 { 229 value: $r('sys.media.ohos_ic_public_remove'), 230 isEnabled: true, 231 action: () => Prompt.showToast({ message: "show toast index 4" }), 232 accessibilityText: '移除', 233 accessibilityLevel: 'yes', 234 accessibilityDescription: '点击操作移除图标', 235 } 236 ] 237 238 build() { 239 Row() { 240 Column() { 241 Divider().height(2).color(0xCCCCCC) 242 SelectTitleBar({ 243 // 定义下拉列表选项 244 options: [ 245 { value: '所有照片' }, 246 { value: '本地（设备）' }, 247 { value: '本地本地本地本地本地（储存卡）' }, 248 ], 249 // 初始选择第一个下拉选项 250 selected: 0, 251 // 选中时触发函数 252 onSelected: (index) => Prompt.showToast({ message: 'page index ' + index }), 253 // 隐藏左侧返回箭头 254 hidesBackButton: true, 255 }) 256 Divider().height(2).color(0xCCCCCC) 257 SelectTitleBar({ 258 options: [ 259 { value: '所有照片' }, 260 { value: '本地（设备）' }, 261 { value: '本地本地本地本地本地（储存卡）' }, 262 ], 263 selected: 0, 264 onSelected: (index) => Prompt.showToast({ message: 'page index ' + index }), 265 hidesBackButton: false, 266 }) 267 Divider().height(2).color(0xCCCCCC) 268 SelectTitleBar({ 269 options: [ 270 { value: '所有照片' }, 271 { value: '本地（设备）' }, 272 { value: '本地本地本地本地本地（储存卡）' }, 273 ], 274 selected: 1, 275 onSelected: (index) => Prompt.showToast({ message: 'page index ' + index }), 276 subtitle: 'example@example.com', 277 }) 278 Divider().height(2).color(0xCCCCCC) 279 SelectTitleBar({ 280 options: [ 281 { value: '所有照片' }, 282 { value: '本地（设备）' }, 283 { value: '本地本地本地本地本地（储存卡）' }, 284 ], 285 selected: 1, 286 onSelected: (index) => Prompt.showToast({ message: 'page index ' + index }), 287 subtitle: 'example@example.com', 288 menuItems: [{ isEnabled: true, value: $r('sys.media.ohos_save_button_filled'), 289 action: () => Prompt.showToast({ message: 'show toast index 1' }), 290 }], 291 }) 292 Divider().height(2).color(0xCCCCCC) 293 SelectTitleBar({ 294 options: [ 295 { value: '所有照片' }, 296 { value: '本地（设备）' }, 297 { value: '本地本地本地本地本地（储存卡）' }, 298 ], 299 selected: 0, 300 onSelected: (index) => Prompt.showToast({ message: 'page index ' + index }), 301 subtitle: 'example@example.com', 302 menuItems: this.menuItems, 303 badgeValue: 99, 304 hidesBackButton: true, 305 }) 306 Divider().height(2).color(0xCCCCCC) 307 }.width('100%') 308 }.height('100%') 309 } 310} 311``` 312 313 314### 示例3（设置Symbol类型图标） 315该示例通过设置SelectTitleBarMenuItem的属性symbolStyle，展示了自定义Symbol类型图标。 316```ts 317import { SelectTitleBar, Prompt, SelectTitleBarMenuItem, SymbolGlyphModifier } from '@kit.ArkUI'; 318 319@Entry 320@Component 321struct Index { 322 // 定义右侧菜单项目列表 323 private menuItems: Array<SelectTitleBarMenuItem> = 324 [ 325 { 326 // 菜单图片资源 327 value: $r('sys.media.ohos_save_button_filled'), 328 // 菜单图片symbol资源 329 symbolStyle: new SymbolGlyphModifier($r('sys.symbol.save')), 330 // 启用图片 331 isEnabled: true, 332 // 点击菜单时触发事件 333 action: () => Prompt.showToast({ message: 'show toast index 1' }), 334 // 屏幕朗读播报文本，优先级比label高 335 accessibilityText: '保存', 336 // 屏幕朗读是否可以聚焦到 337 accessibilityLevel: 'yes', 338 // 屏幕朗读最后播报的描述文本 339 accessibilityDescription: '点击操作保存图标', 340 }, 341 { 342 value: $r('sys.media.ohos_ic_public_copy'), 343 symbolStyle: new SymbolGlyphModifier($r('sys.symbol.car')), 344 isEnabled: true, 345 action: () => Prompt.showToast({ message: 'show toast index 2' }), 346 accessibilityText: '复制', 347 // 此处为no，屏幕朗读不聚焦 348 accessibilityLevel: 'no', 349 accessibilityDescription: '点击操作复制图标', 350 }, 351 { 352 value: $r('sys.media.ohos_ic_public_edit'), 353 symbolStyle: new SymbolGlyphModifier($r('sys.symbol.ai_edit')), 354 isEnabled: true, 355 action: () => Prompt.showToast({ message: 'show toast index 3' }), 356 accessibilityText: '编辑', 357 accessibilityLevel: 'yes', 358 accessibilityDescription: '点击操作编辑图标', 359 }, 360 { 361 value: $r('sys.media.ohos_ic_public_remove'), 362 symbolStyle: new SymbolGlyphModifier($r('sys.symbol.remove_songlist')), 363 isEnabled: true, 364 action: () => Prompt.showToast({ message: "show toast index 4" }), 365 accessibilityText: '移除', 366 accessibilityLevel: 'yes', 367 accessibilityDescription: '点击操作移除图标', 368 } 369 ] 370 371 build() { 372 Row() { 373 Column() { 374 Divider().height(2).color(0xCCCCCC) 375 SelectTitleBar({ 376 // 定义下拉列表选项 377 options: [ 378 { value: '所有照片' }, 379 { value: '本地（设备）' }, 380 { value: '本地本地本地本地本地（储存卡）' }, 381 ], 382 // 初始选择第一个下拉选项 383 selected: 0, 384 // 选中时触发函数 385 onSelected: (index) => Prompt.showToast({ message: 'page index ' + index }), 386 // 隐藏左侧返回箭头 387 hidesBackButton: true, 388 }) 389 Divider().height(2).color(0xCCCCCC) 390 SelectTitleBar({ 391 options: [ 392 { value: '所有照片' }, 393 { value: '本地（设备）' }, 394 { value: '本地本地本地本地本地（储存卡）' }, 395 ], 396 selected: 0, 397 onSelected: (index) => Prompt.showToast({ message: 'page index ' + index }), 398 hidesBackButton: false, 399 }) 400 Divider().height(2).color(0xCCCCCC) 401 SelectTitleBar({ 402 options: [ 403 { value: '所有照片' }, 404 { value: '本地（设备）' }, 405 { value: '本地本地本地本地本地（储存卡）' }, 406 ], 407 selected: 1, 408 onSelected: (index) => Prompt.showToast({ message: 'page index ' + index }), 409 subtitle: 'example@example.com', 410 }) 411 Divider().height(2).color(0xCCCCCC) 412 SelectTitleBar({ 413 options: [ 414 { value: '所有照片' }, 415 { value: '本地（设备）' }, 416 { value: '本地本地本地本地本地（储存卡）' }, 417 ], 418 selected: 1, 419 onSelected: (index) => Prompt.showToast({ message: 'page index ' + index }), 420 subtitle: 'example@example.com', 421 menuItems: [{ 422 isEnabled: true, value: $r('sys.media.ohos_save_button_filled'), 423 action: () => Prompt.showToast({ message: 'show toast index 1' }), 424 }], 425 }) 426 Divider().height(2).color(0xCCCCCC) 427 SelectTitleBar({ 428 options: [ 429 { value: '所有照片' }, 430 { value: '本地（设备）' }, 431 { value: '本地本地本地本地本地（储存卡）' }, 432 ], 433 selected: 0, 434 onSelected: (index) => Prompt.showToast({ message: 'page index ' + index }), 435 subtitle: 'example@example.com', 436 menuItems: this.menuItems, 437 badgeValue: 99, 438 hidesBackButton: true, 439 }) 440 Divider().height(2).color(0xCCCCCC) 441 }.width('100%') 442 }.height('100%') 443 } 444} 445``` 446
