1# SelectTitleBar
2
3
4普通型标题栏的一种，含有一个 Select 控件，可用于页面之间的切换；可用于一级页面、二级及其以上界面（配置返回键）。
5
6
7> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
8> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
9
10
11## 导入模块
12
13```
14import { SelectTitleBar } from "@ohos.arkui.advanced.SelectTitleBar"
15```
16
17
18## 子组件
19
20无
21
22
23## 接口
24
25SelectTitleBar({selected: number, options: Array<SelectOption>, menuItems?: Array<SelectTitleBarMenuItem>, subtitle?: ResourceStr, badgeValue?: number, hidesBackButton?: boolean, onSelected?: (index: number) => void})
26
27**装饰器类型：**\@Component
28
29**系统能力：** SystemCapability.ArkUI.ArkUI.Full
30
31**参数：**
32
33| 参数名 | 参数类型 | 必选 | 装饰器类型 | 参数描述 |
34| -------- | -------- | -------- | -------- | -------- |
35| selected | number | 是 | \@Prop | 当前选中项目的索引 |
36| options | Array<SelectOption> | 是 | - | 下拉菜单中的项目 |
37| menuItems | Array<SelectTitleBarMenuItem&gt; | 否 | - | 右侧菜单项目列表，定义标题栏右侧的菜单项目。 |
38| subtitle | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | - | 子标题 |
39| badgeValue | number | 否 | - | 新事件标记 |
40| hidesBackButton | boolean | 否 | - | 是否隐藏 |
41| onSelected | (index:&nbsp;number)&nbsp;=&gt;&nbsp;void | 否 | - | 下拉菜单项目选中触发的闭包，传入选中项的索引 |
42
43
44### SelectTitleBarMenuItem
45
46| 名称 | 值 | 是否必填 | 描述 |
47| -------- | -------- | -------- | -------- |
48| value | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 图标资源 |
49| isEnabled | boolean | 是 | 是否启用 |
50| action | ()&nbsp;=&gt;&nbsp;void | 否 | 触发时的动作闭包 |
51
52
53## 示例 1 - 一级页面下拉菜单
54
55```
56import { SelectTitleBar } from "@ohos.arkui.advanced.SelectTitleBar"
57import Prompt from '@system.prompt'
58
59@Entry
60@Component
61struct Index {
62  build() {
63    Row() {
64      Column() {
65        SelectTitleBar({
66          options: [
67            { value: '所有照片' },
68            { value: '本地（设备）' },
69            { value: '本地本地本地本地本地（储存卡）' }
70          ],
71          selected: 0,
72          onSelected: (index) => Prompt.showToast({ message: 'page index ' + index }),
73          hidesBackButton: true
74        })
75      }.width('100%')
76    }.height('100%')
77  }
78}
79```
80
81![zh-cn_image_0000001665793709](figures/zh-cn_image_0000001665793709.png)
82
83
84## 示例 2 - 二级页面下拉菜单
85
86```
87import { SelectTitleBar } from "@ohos.arkui.advanced.SelectTitleBar"
88import Prompt from '@system.prompt'
89
90@Entry
91@Component
92struct Index {
93  build() {
94    Row() {
95      Column() {
96        Divider().height(2).color(0xCCCCCC)
97        SelectTitleBar({
98          options: [
99            { value: '所有照片' },
100            { value: '本地（设备）' },
101            { value: '本地本地本地本地本地（储存卡）' }
102          ],
103          selected: 0,
104          onSelected: (index) => Prompt.showToast({ message: 'page index ' + index }),
105          hidesBackButton: false
106        })
107        Divider().height(2).color(0xCCCCCC)
108        SelectTitleBar({
109          options: [
110            { value: '所有照片' },
111            { value: '本地（设备）' },
112            { value: '本地本地本地本地本地（储存卡）' }
113          ],
114          selected: 1,
115          onSelected: (index) => Prompt.showToast({ message: 'page index ' + index }),
116          subtitle: "example@openharmony.cn"
117        })
118        Divider().height(2).color(0xCCCCCC)
119        SelectTitleBar({
120          options: [
121            { value: '所有照片' },
122            { value: '本地（设备）' },
123            { value: '本地本地本地本地本地（储存卡）' }
124          ],
125          selected: 1,
126          onSelected: (index) => Prompt.showToast({ message: 'page index ' + index }),
127          subtitle: "example@openharmony.cn",
128          menuItems: [ { isEnabled: true, value: $r('app.media.ic_public_save'),
129            action: () => Prompt.showToast({ message: "show toast index 1" })
130          } ]
131        })
132        Divider().height(2).color(0xCCCCCC)
133      }.width('100%')
134    }.height('100%')
135  }
136}
137```
138
139![zh-cn_image_0000001617439304](figures/zh-cn_image_0000001617439304.png)
140
141
142## 示例 3 - 新事件标记
143
144```
145import { SelectTitleBar } from "@ohos.arkui.advanced.SelectTitleBar"
146import Prompt from '@system.prompt'
147
148@Entry
149@Component
150struct Index {
151  menuItems: { value: Resource, isEnabled: boolean, action: () => void }[] =
152    [ { isEnabled: true, value: $r('app.media.ic_public_save'),
153        action: () => prompt.showToast({ message: "show toast index 1" })
154      },
155      { isEnabled: true, value: $r('app.media.ic_public_reduce'),
156        action: () => prompt.showToast({ message: "show toast index 2" })
157      },
158      { isEnabled: true, value: $r('app.media.ic_public_edit'),
159        action: () => prompt.showToast({ message: "show toast index 3" })
160      },
161      { isEnabled: true, value: $r('app.media.ic_public_reduce'),
162        action: () => prompt.showToast({ message: "show toast index 4" })
163      } ]
164  build() {
165    Row() {
166      Column() {
167        SelectTitleBar({
168          options: [
169            { value: '所有照片' },
170            { value: '本地（设备）' },
171            { value: '本地本地本地本地本地（储存卡）' }
172          ],
173          selected: 0,
174          onSelected: (index) => Prompt.showToast({ message: 'page index ' + index }),
175          subtitle: "example@openharmony.cn",
176          menuItems: this.menuItems,
177          badgeValue: 99,
178          hidesBackButton: true
179        })
180      }.width('100%')
181    }.height('100%')
182  }
183}
184```
185
186![zh-cn_image_0000001616959836](figures/zh-cn_image_0000001616959836.png)
187