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