1# SelectTitleBar 2 3 4下拉菜单标题栏包含一个下拉菜单，可用于页面之间的切换；可用于一级页面、二级及其以上界面（配置返回键）。 5 6 7> **说明：** 8> 9> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 10 11 12## 导入模块 13 14``` 15import { SelectTitleBar } from '@kit.ArkUI' 16``` 17 18 19## 子组件 20 21无 22 23## 属性 24不支持[通用属性](ts-universal-attributes-size.md) 25 26## SelectTitleBar 27 28SelectTitleBar({selected: number, options: Array<SelectOption>, menuItems?: Array<SelectTitleBarMenuItem>, subtitle?: ResourceStr, badgeValue?: number, hidesBackButton?: boolean, onSelected?: (index: number) => void}) 29 30**装饰器类型：**\@Component 31 32**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 33 34**系统能力：** SystemCapability.ArkUI.ArkUI.Full 35 36| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 37| -------- | -------- | -------- | -------- | -------- | 38| selected | number | 是 | \@Prop | 当前选中项目的索引。<br>第一项的索引为0。如果不设置该属性，则默认值为0。 | 39| options | Array<[SelectOption](ts-basic-components-select.md#selectoption对象说明)> | 是 | - | 下拉菜单中的项目。 | 40| menuItems | Array<[SelectTitleBarMenuItem](#selecttitlebarmenuitem)> | 否 | - | 右侧菜单项目列表，定义标题栏右侧的菜单项目。 | 41| subtitle | [ResourceStr](ts-types.md#resourcestr) | 否 | - | 子标题。 | 42| badgeValue | number | 否 | - | 新事件标记。<br>取值范围：[-2147483648,2147483647]，超出范围时会加上或减去4294967296，使得值仍在范围内，非整数时会舍去小数部分取整数部分，如5.5取5。<br>**说明：** 小于等于0时不显示信息标记。<br>最大消息数99，超过最大消息时仅显示99+。超大数值属于异常值，不显示信息标记。 | 43| hidesBackButton | boolean | 否 | - | 是否隐藏左侧的返回箭头。<br>默认值：false。true：隐藏，false：显示。| 44| onSelected | (index: number) => void | 否 | - | 下拉菜单项目选中触发的回调函数，传入选中项的索引。 | 45 46> **说明：** 47> 48> 入参对象不可为undefined，即`SelectTitleBar(undefined)`。 49 50## SelectTitleBarMenuItem 51 52**系统能力：** SystemCapability.ArkUI.ArkUI.Full 53 54| 名称 | 类型 | 必填 | 说明 | 55| -------- | -------- | -------- | -------- | 56| value | [ResourceStr](ts-types.md#resourcestr) | 是 | 图标资源。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 57| label<sup>13+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 图标标签描述。<br/>**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 | 58| isEnabled | boolean | 否 | 是否启用。<br>默认值：false。true：启用，false：禁用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 59| action | () => void | 否 | 触发时的动作闭包。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 60 61## 事件 62不支持[通用事件](ts-universal-events-click.md) 63 64## 示例 65 66该示例实现了简单的下拉菜单标题栏，带有返回箭头的下拉菜单标题栏和带有右侧菜单项目列表的下拉菜单标题栏。 67 68```ts 69import { SelectTitleBar, promptAction, SelectTitleBarMenuItem } from '@kit.ArkUI' 70 71 72@Entry 73@Component 74struct Index { 75 // 定义右侧菜单项目列表 76 private menuItems: Array<SelectTitleBarMenuItem> = 77 [ 78 { 79 // 菜单图片资源 80 value: $r('sys.media.ohos_save_button_filled'), 81 // 启用图片 82 isEnabled: true, 83 // 点击菜单时触发事件 84 action: () => promptAction.showToast({ message: 'show toast index 1' }), 85 }, 86 { 87 value: $r('sys.media.ohos_ic_public_copy'), 88 isEnabled: true, 89 action: () => promptAction.showToast({ message: 'show toast index 2' }), 90 }, 91 { 92 value: $r('sys.media.ohos_ic_public_edit'), 93 isEnabled: true, 94 action: () => promptAction.showToast({ message: 'show toast index 3' }), 95 }, 96 { 97 value: $r('sys.media.ohos_ic_public_remove'), 98 isEnabled: true, 99 action: () => promptAction.showToast({ message: 'show toast index 4' }), 100 }, 101 ] 102 103 build() { 104 Row() { 105 Column() { 106 Divider().height(2).color(0xCCCCCC) 107 SelectTitleBar({ 108 // 定义下拉列表选项 109 options: [ 110 { value: '所有照片' }, 111 { value: '本地（设备）' }, 112 { value: '本地本地本地本地本地（储存卡）' } 113 ], 114 // 初始选择第一个下拉选项 115 selected: 0, 116 // 选中时触发函数 117 onSelected: (index) => promptAction.showToast({ message: 'page index ' + index }), 118 // 隐藏左侧返回箭头 119 hidesBackButton: true, 120 }) 121 Divider().height(2).color(0xCCCCCC) 122 SelectTitleBar({ 123 options: [ 124 { value: '所有照片' }, 125 { value: '本地（设备）' }, 126 { value: '本地本地本地本地本地（储存卡）' }, 127 ], 128 selected: 0, 129 onSelected: (index) => promptAction.showToast({ message: 'page index ' + index }), 130 hidesBackButton: false, 131 }) 132 Divider().height(2).color(0xCCCCCC) 133 SelectTitleBar({ 134 options: [ 135 { value: '所有照片' }, 136 { value: '本地（设备）' }, 137 { value: '本地本地本地本地本地（储存卡）' }, 138 ], 139 selected: 1, 140 onSelected: (index) => promptAction.showToast({ message: 'page index ' + index }), 141 subtitle: 'example@example.com', 142 }) 143 Divider().height(2).color(0xCCCCCC) 144 SelectTitleBar({ 145 options: [ 146 { value: '所有照片' }, 147 { value: '本地（设备）' }, 148 { value: '本地本地本地本地本地（储存卡）' }, 149 ], 150 selected: 1, 151 onSelected: (index) => promptAction.showToast({ message: 'page index ' + index }), 152 subtitle: 'example@example.com', 153 menuItems: [{ isEnabled: true, value: $r('sys.media.ohos_save_button_filled'), 154 action: () => promptAction.showToast({ message: 'show toast index 1' }), 155 }], 156 }) 157 Divider().height(2).color(0xCCCCCC) 158 SelectTitleBar({ 159 options: [ 160 { value: '所有照片' }, 161 { value: '本地（设备）' }, 162 { value: '本地本地本地本地本地（储存卡）' }, 163 ], 164 selected: 0, 165 onSelected: (index) => promptAction.showToast({ message: 'page index ' + index }), 166 subtitle: 'example@example.com', 167 menuItems: this.menuItems, 168 badgeValue: 99, 169 hidesBackButton: true, 170 }) 171 Divider().height(2).color(0xCCCCCC) 172 }.width('100%') 173 }.height('100%') 174 } 175} 176``` 177 178
