1# @ohos.arkui.advanced.SelectTitleBar（下拉菜单标题栏） 2 3 4下拉菜单标题栏包含一个下拉菜单，可用于页面之间的切换；可用于一级页面、二级及其以上界面（配置返回键）。 5 6 7> **说明：** 8> 9> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 10 11 12## 导入模块 13 14``` 15import { SelectTitleBar } from "@ohos.arkui.advanced.SelectTitleBar" 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**系统能力：** SystemCapability.ArkUI.ArkUI.Full 33 34**参数：** 35 36| 名称 | 参数类型 | 必填 | 装饰器类型 | 说明 | 37| -------- | -------- | -------- | -------- | -------- | 38| selected | number | 是 | \@Prop | 当前选中项目的索引。<br>第一项的索引为0。如果不设置该属性，则默认值为-1。 | 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 | 否 | - | 新事件标记。 | 43| hidesBackButton | boolean | 否 | - | 是否隐藏左侧的返回箭头。<br>默认值：false。true：隐藏，false：显示。| 44| onSelected | (index: number) => void | 否 | - | 下拉菜单项目选中触发的回调函数，传入选中项的索引。 | 45 46 47## SelectTitleBarMenuItem 48 49| 名称 | 类型 | 必填 | 说明 | 50| -------- | -------- | -------- | -------- | 51| value | [ResourceStr](ts-types.md#resourcestr) | 是 | 图标资源。 | 52| isEnabled | boolean | 否 | 是否启用。<br>默认值：false。true：启用，false：禁用。 | 53| action | () => void | 否 | 触发时的动作闭包。 | 54 55## 事件 56不支持[通用事件](ts-universal-events-click.md) 57 58## 示例 59 60```ts 61import { SelectTitleBar } from "@ohos.arkui.advanced.SelectTitleBar" 62import promptAction from '@ohos.promptAction' 63 64interface menuItems { 65 value: Resource; 66 isEnabled?: boolean; 67 action?: () => void 68} 69 70@Entry 71@Component 72struct Index { 73 private menuItems:Array<menuItems> = 74 [ 75 { 76 value:$r('app.media.ic_public_save'), 77 isEnabled:true, 78 action:() => promptAction.showToast({ message: "show toast index 1" }) 79 }, 80 { 81 value:$r('app.media.ic_public_reduce'), 82 isEnabled:true, 83 action:() => promptAction.showToast({ message: "show toast index 2" }) 84 }, 85 { 86 value:$r('app.media.ic_public_edit'), 87 isEnabled:true, 88 action:() => promptAction.showToast({ message: "show toast index 3" }) 89 }, 90 { 91 value:$r('app.media.ic_public_reduce'), 92 isEnabled:true, 93 action:() => promptAction.showToast({ message: "show toast index 4" }) 94 } 95 ] 96 97 build() { 98 Row() { 99 Column() { 100 Divider().height(2).color(0xCCCCCC) 101 SelectTitleBar({ 102 options: [ 103 { value: '所有照片' }, 104 { value: '本地（设备）' }, 105 { value: '本地本地本地本地本地（储存卡）' } 106 ], 107 selected: 0, 108 onSelected: (index) => promptAction.showToast({ message: 'page index ' + index }), 109 hidesBackButton: true 110 }) 111 Divider().height(2).color(0xCCCCCC) 112 SelectTitleBar({ 113 options: [ 114 { value: '所有照片' }, 115 { value: '本地（设备）' }, 116 { value: '本地本地本地本地本地（储存卡）' } 117 ], 118 selected: 0, 119 onSelected: (index) => promptAction.showToast({ message: 'page index ' + index }), 120 hidesBackButton: false 121 }) 122 Divider().height(2).color(0xCCCCCC) 123 SelectTitleBar({ 124 options: [ 125 { value: '所有照片' }, 126 { value: '本地（设备）' }, 127 { value: '本地本地本地本地本地（储存卡）' } 128 ], 129 selected: 1, 130 onSelected: (index) => promptAction.showToast({ message: 'page index ' + index }), 131 subtitle: "example@example.com" 132 }) 133 Divider().height(2).color(0xCCCCCC) 134 SelectTitleBar({ 135 options: [ 136 { value: '所有照片' }, 137 { value: '本地（设备）' }, 138 { value: '本地本地本地本地本地（储存卡）' } 139 ], 140 selected: 1, 141 onSelected: (index) => promptAction.showToast({ message: 'page index ' + index }), 142 subtitle: "example@example.com", 143 menuItems: [{ isEnabled: true, value: $r('app.media.ic_public_save'), 144 action: () => promptAction.showToast({ message: "show toast index 1" }) 145 }] 146 }) 147 Divider().height(2).color(0xCCCCCC) 148 SelectTitleBar({ 149 options: [ 150 { value: '所有照片' }, 151 { value: '本地（设备）' }, 152 { value: '本地本地本地本地本地（储存卡）' } 153 ], 154 selected: 0, 155 onSelected: (index) => promptAction.showToast({ message: 'page index ' + index }), 156 subtitle: "example@example.com", 157 menuItems: this.menuItems, 158 badgeValue: 99, 159 hidesBackButton: true 160 }) 161 Divider().height(2).color(0xCCCCCC) 162 }.width('100%') 163 }.height('100%') 164 } 165} 166``` 167 168 169
