• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# SubHeader
2<!--Kit: ArkUI-->
3<!--Subsystem: ArkUI-->
4<!--Owner: @fengluochenai-->
5<!--Designer: @YanSanzo-->
6<!--Tester: @tinygreyy-->
7<!--Adviser: @HelloCrease-->
8
9
10子标题,用于列表项顶部,将该组列表划分为一个区块,子标题名称用来概括该区块内容。也可以用于内容项顶部,子标题名称用来概括该区块内容。
11
12
13> **说明:**
14>
15> 该组件从API version 10开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
16>
17
18
19## 导入模块
20
21```ts
22import { SubHeader } from '@kit.ArkUI';
23```
24
25
26## 子组件
27
2829
30## 属性
31
32不支持[通用属性](ts-component-general-attributes.md)。
33
34> **说明:**
35>
36> 不支持设置文本相关。
37
38## SubHeader
39
40SubHeader({icon?: ResourceStr, iconSymbolOptions?: SymbolOptions, primaryTitle?: ResourceStr, secondaryTitle?:
41ResourceStr, select?: SelectOptions, operationType?: OperationType, operationItem?: Array&lt;OperationOption&gt;,
42operationSymbolOptions?: Array&lt;SymbolOptions&gt;, primaryTitleModifier?: TextModifier, secondaryTitleModifier?:
43TextModifier, titleBuilder?: () => void, contentMargin?: LocalizedMargin, contentPadding?: LocalizedPadding})
44
45**装饰器类型:**\@Component
46
47**系统能力:** SystemCapability.ArkUI.ArkUI.Full
48
49**设备行为差异:** 该接口在Wearable设备上使用时,应用程序运行异常, 异常信息中提示接口未定义,在其他设备中可正常调用。
50
51| 名称 | 类型 | 必填 | 装饰器类型         | 说明 |
52| -------- | -------- | -------- |---------------| -------- |
53| icon | [ResourceStr](ts-types.md#resourcestr) | 否 | \@Prop        | 图标设置项。<br/>**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 |
54| iconSymbolOptions<sup>12+</sup> | [SymbolOptions](#symboloptions12) | 否 | -             | icon为[SymbolGlyph](ts-basic-components-symbolGlyph.md)时的设置项。<br/>**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 |
55| primaryTitle | [ResourceStr](ts-types.md#resourcestr) | 否 | \@Prop        | 标题内容。<br/>**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 |
56| secondaryTitle | [ResourceStr](ts-types.md#resourcestr) | 否 | \@Prop        | 副标题内容。<br/>**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 |
57| select | [SelectOptions](#selectoptions) | 否 | -             | select内容以及事件。<br/>**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 |
58| operationType | [OperationType](#operationtype) | 否 | \@Prop        | 操作区(右侧)元素样式。<br/>默认值:OperationType.BUTTON<br/>**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 |
59| operationItem | Array&lt;[OperationOption](#operationoption)&gt; | 否 | -             | 操作区(右侧)的设置项。<br/>**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 |
60| operationSymbolOptions<sup>12+</sup> | Array&lt;[SymbolOptions](#symboloptions12)&gt; | 否 | -             | operationType为OperationType.ICON_GROUP,<br/>operationItem设置多个图标,图标为[SymbolGlyph](ts-basic-components-symbolGlyph.md)时的设置项。<br/>**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 |
61| primaryTitleModifier<sup>12+</sup> | [TextModifier](ts-universal-attributes-attribute-modifier.md#自定义modifier) | 否 | -             | 设置标题文本属性,如设置标题颜色、字体大小、字重等。<br/>**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 |
62| secondaryTitleModifier<sup>12+</sup> | [TextModifier](ts-universal-attributes-attribute-modifier.md#自定义modifier) | 否 | -             | 设置副标题文本属性,如设置标题颜色、字体大小、字重等。<br/>**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 |
63| titleBuilder<sup>12+</sup> | () => void | 否 | @BuilderParam | 自定义标题区内容<br/>**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 |
64| contentMargin<sup>12+</sup> | [LocalizedMargin](ts-types.md#localizedmargin12) | 否 | @Prop         | 子标题外边距,不支持设置负数。<br />默认值:<br /> `{start: LengthMetrics.resource(` <br /> `$r('sys.float.margin_left'))`, <br /> `end: LengthMetrics.resource(` <br /> `$r('sys.float.margin_right'))}`<br/>**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 |
65| contentPadding<sup>12+</sup> | [LocalizedPadding](ts-types.md#localizedpadding12) | 否 | @Prop         | 子标题内边距。<br />默认值:<br />左侧为副标题或副标题加图标时:<br /> {start: LengthMetrics.vp(12), end: LengthMetrics.vp(12)}。<br/>**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。|
66
67
68## OperationType
69
70**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
71
72**系统能力:** SystemCapability.ArkUI.ArkUI.Full
73
74**设备行为差异:** 该接口在Wearable设备上使用时,应用程序运行异常, 异常信息中提示接口未定义,在其他设备中可正常调用。
75
76| 名称 | 值 | 说明 |
77| -------- | -------- | -------- |
78| TEXT_ARROW |  0  | 文本按钮(带右箭头)。 |
79| BUTTON |  1  |  文本按钮(不带右箭头)。 |
80| ICON_GROUP |  2  |  图标按钮(最多支持配置三张图标)。 |
81| LOADING |  3  |  加载动画。 |
82
83## SelectOptions
84
85**系统能力:** SystemCapability.ArkUI.ArkUI.Full
86
87**设备行为差异:** 该接口在Wearable设备上使用时,应用程序运行异常, 异常信息中提示接口未定义,在其他设备中可正常调用。
88
89| 名称 | 类型 | 必填 | 说明                                                                                                                                                           |
90| -------- | -------- | -------- |--------------------------------------------------------------------------------------------------------------------------------------------------------------|
91| options | Array&lt;[SelectOption](ts-basic-components-select.md#selectoption对象说明)&gt; | 是 | 下拉选项内容。 <br/>**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。                                                                                                 |
92| selected | number | 否 | 设置下拉菜单初始选项的索引。<br/>取值范围:大于等于-1。<br/>第一项的索引为0。<br/>当不设置selected属性时,默认选择值为-1,菜单项不选中。<br/>若设置数值小于-1,按不选中处理。<br/>**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 |
93| value | [ResourceStr](ts-types.md#resourcestr) | 否 | 设置下拉按钮本身的文本内容。<br/>默认值:空字符串。<br/>**说明**:如果文本大于列宽时,文本被截断。从API version 20开始,支持Resource类型。<br/>**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。                       |
94| onSelect | (index:&nbsp;number,&nbsp;value?:&nbsp;string)&nbsp;=&gt;&nbsp;void | 否 | 下拉菜单选中某一项的回调。<br/>-&nbsp;index:选中项的索引。<br/>-&nbsp;value:选中项的值。<br/>**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。                                           |
95| defaultFocus<sup>18+</sup> | boolean | 否 | 下拉按钮是否为默认焦点。<br/>true:下拉按钮是默认焦点。<br/>false:下拉按钮不是默认焦点。<br />默认值:false <br/>**原子化服务API:** 从API version 18开始,该接口支持在原子化服务中使用。                                 |
96
97## OperationOption
98
99**系统能力:** SystemCapability.ArkUI.ArkUI.Full
100
101**设备行为差异:** 该接口在Wearable设备上使用时,应用程序运行异常, 异常信息中提示接口未定义,在其他设备中可正常调用。
102
103| 名称 | 类型 | 必填 | 说明                                                                                                                                                                                                                                                       |
104| -------- | -------- | -------- |----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
105| value | [ResourceStr](ts-types.md#resourcestr) | 是 | 文本内容。<br/>**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。                                                                                                                                                                                                                                                  |
106| action | ()=&gt;void | 否 | 子标题右侧按钮点击事件。<br/>**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。                                                                                                                                                                                                                                                    |
107| accessibilityLevel<sup>18+<sup>       | string  | 否 | 子标题右侧按钮无障碍重要性。用于控制当前项是否可被无障碍辅助服务所识别。<br/>支持的值为:<br/>"auto":当前组件会转换"yes"。<br/>"yes":当前组件可被无障碍辅助服务所识别。<br/>"no":当前组件不可被无障碍辅助服务所识别。<br/>"no-hide-descendants":当前组件及其所有子组件不可被无障碍辅助服务所识别。<br/>默认值:"auto"<br/>**原子化服务API:** 从API version 18开始,该接口支持在原子化服务中使用。 |
108| accessibilityText<sup>18+<sup>        | [ResourceStr](ts-types.md#resourcestr) | 否 | 子标题右侧按钮的无障碍文本属性。当组件不包含文本属性时,屏幕朗读选中此组件时不播报,使用者无法清楚地知道当前选中了什么组件。为了解决此场景,开发人员可为不包含文字信息的组件设置无障碍文本,当屏幕朗读选中此组件时播报无障碍文本的内容,帮助屏幕朗读的使用者清楚地知道自己选中了什么组件。<br/>默认值:类型为TEXT_ARROW和BUTTON时默认值为当前项value属性内容,其他类型默认值为“ ”。<br/>**原子化服务API:** 从API version 18开始,该接口支持在原子化服务中使用。 |
109| accessibilityDescription<sup>18+<sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 子标题右侧按钮的无障碍描述。此描述用于向用户详细解释当前组件,开发人员应为组件的这一属性提供较为详尽的文本说明,以协助用户理解即将执行的操作及其可能产生的后果。特别是当这些后果无法仅从组件的属性和无障碍文本中直接获知时。如果组件同时具备文本属性和无障碍说明属性,当组件被选中时,系统将首先播报组件的文本属性,随后播报无障碍说明属性的内容。<br/>默认值:类型为LOADING时,默认值为“正在加载”,其他类型默认值为“单指双击即可执行”。<br/>**原子化服务API:** 从API version 18开始,该接口支持在原子化服务中使用。        |
110| defaultFocus<sup>18+</sup> | boolean | 否 | 子标题右侧按钮是否为默认焦点。<br/>true:子标题右侧按钮是默认焦点。<br/>false:子标题右侧按钮不是默认焦点。<br />默认值:false <br/>**原子化服务API:** 从API version 18开始,该接口支持在原子化服务中使用。                                                                                                                                            |
111## SymbolOptions<sup>12+</sup>
112
113**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
114
115**系统能力:** SystemCapability.ArkUI.ArkUI.Full
116
117**设备行为差异:** 该接口在Wearable设备上使用时,应用程序运行异常, 异常信息中提示接口未定义,在其他设备中可正常调用。
118
119| 名称 | 类型 | 必填 | 说明                                                                                                                                                                                                                                              |
120| -------- | -------- | -------- |-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
121| fontColor | Array&lt;[ResourceColor](ts-types.md#resourcecolor)&gt; | 否 | 设置[SymbolGlyph](ts-basic-components-symbolGlyph.md)颜色。<br/>默认值:不同渲染策略下默认值不同。                                                                                                                                                                       |
122| fontSize | number \|&nbsp;string \|&nbsp;[Resource](ts-types.md#resource) | 否 | 设置[SymbolGlyph](ts-basic-components-symbolGlyph.md)大小。<br/>number类型取值范围:大于等于0。<br/>设置string类型时,支持number类型取值的字符串形式,可以附带单位,例如:"10","10fp"。<br/>默认值:系统默认值。                                                                                                 |
123| fontWeight | number \|&nbsp;[FontWeight](ts-appendix-enums.md#fontweight)&nbsp;\|&nbsp;string | 否 | 设置[SymbolGlyph](ts-basic-components-symbolGlyph.md)粗细。<br/>number类型取值[100,900],取值间隔为100,默认为400,取值越大,字体越粗。<br/>string类型仅支持number类型取值的字符串形式,例如“400”,以及“bold”、“bolder”、“lighter”、“regular” 、“medium”分别对应FontWeight中相应的枚举值。<br/>默认值:FontWeight.Normal |
124| renderingStrategy | [SymbolRenderingStrategy](ts-basic-components-symbolGlyph.md#symbolrenderingstrategy11枚举说明) | 否 | 设置[SymbolGlyph](ts-basic-components-symbolGlyph.md)渲染策略。<br/>默认值:SymbolRenderingStrategy.SINGLE<br/>**说明:**<br/>$r('sys.symbol.ohos_*')中引用的资源仅ohos_trash_circle、ohos_folder_badge_plus、ohos_lungs支持分层与多色模式。                                       |
125| effectStrategy | [SymbolEffectStrategy](ts-basic-components-symbolGlyph.md#symboleffectstrategy11枚举说明) | 否 | 设置[SymbolGlyph](ts-basic-components-symbolGlyph.md)动效策略。<br/>默认值:SymbolEffectStrategy.NONE<br/>**说明:**<br/>$r('sys.symbol.ohos_*')中引用的资源仅ohos_wifi支持层级动效模式。                                                                                       |
126
127## 事件
128不支持[通用事件](ts-component-general-events.md)。
129
130## 示例
131### 示例1(效率型子标题)
132该示例主要演示子标题左侧为icon、secondaryTitle,右侧operationType为按钮类型。
133
134```ts
135import { Prompt, OperationType, SubHeader } from '@kit.ArkUI';
136
137@Entry
138@Component
139struct SubHeaderExample {
140  build() {
141    Column() {
142      SubHeader({
143        icon: $r('sys.media.ohos_ic_public_email'),
144        secondaryTitle: '二级标题',
145        operationType: OperationType.BUTTON,
146        operationItem: [{
147          value: '操作',
148          action: () => {
149            Prompt.showToast({ message: 'demo' });
150          }
151        }]
152      })
153    }
154  }
155}
156```
157
158![zh-cn_image_subheader_example01](figures/zh-cn_image_subheader_example01.png)
159
160### 示例2(双行文本内容型子标题)
161该示例主要演示子标题左侧为primaryTitle、secondaryTitle,右侧operationType类型为TEXT_ARROW。
162
163```ts
164import { Prompt, OperationType, SubHeader } from '@kit.ArkUI';
165
166@Entry
167@Component
168struct SubHeaderExample {
169  build() {
170    Column() {
171      SubHeader({
172        primaryTitle: '一级标题',
173        secondaryTitle: '二级标题',
174        operationType: OperationType.TEXT_ARROW,
175        operationItem: [{
176          value: '更多',
177          action: () => {
178            Prompt.showToast({ message: 'demo' });
179          }
180        }]
181      })
182    }
183  }
184}
185```
186
187![子标题2](figures/zh-cn_image_subheader_example02.png)
188
189### 示例3(spinner型内容型子标题)
190该示例主要演示子标题左侧为select,右侧operationType类型为ICON_GROUP。
191
192```ts
193import { Prompt, OperationType, SubHeader } from '@kit.ArkUI';
194
195@Entry
196@Component
197struct SubHeaderExample {
198  build() {
199    Column() {
200      SubHeader({
201        // 左侧为select选择器
202        select: {
203          options: [{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }],
204          value: 'selectDemo',
205          selected: 2,
206          onSelect: () => {
207            Prompt.showToast({ message: 'demo' });
208          }
209        },
210        operationType: OperationType.ICON_GROUP,
211        // 右侧为三个icon图标
212        operationItem: [{
213          value: $r('sys.media.ohos_ic_public_email'),
214          action: () => {
215            Prompt.showToast({ message: 'demo' })
216          }
217        }, {
218          value: $r('sys.media.ohos_ic_public_email'),
219          action: () => {
220            Prompt.showToast({ message: 'demo' });
221          }
222        }, {
223          value: $r('sys.media.ohos_ic_public_email'),
224          action: () => {
225            Prompt.showToast({ message: 'demo' });
226          }
227        }]
228      })
229    }
230  }
231}
232```
233
234![zh-cn_image_subheader_example03](figures/zh-cn_image_subheader_example03.png)
235
236### 示例4(设置左侧symbol图标)
237该示例主要演示子标题左侧icon设置symbol图标。
238
239```ts
240
241import { Prompt, OperationType, SubHeader } from '@kit.ArkUI';
242
243@Entry
244@Component
245struct SubHeaderExample {
246  build() {
247    Column() {
248      SubHeader({
249        // 设置icon为symbol图标
250        icon: $r('sys.symbol.ohos_wifi'),
251        iconSymbolOptions: {
252          effectStrategy: SymbolEffectStrategy.HIERARCHICAL,
253        },
254        secondaryTitle: '标题',
255        operationType: OperationType.BUTTON,
256        operationItem: [{
257          value: '操作',
258          action: () => {
259            Prompt.showToast({ message: 'demo' });
260          }
261        }]
262      })
263    }
264  }
265}
266```
267
268![子标题4](figures/zh-cn_image_subheader_example04.gif)
269
270### 示例5(设置右侧symbol图标)
271该示例主要演示子标题operationType设置为OperationType.ICON_GROUP,operationItem的value设置为symbol图标。
272
273```ts
274import { Prompt, OperationType, SubHeader } from '@kit.ArkUI';
275
276@Entry
277@Component
278struct SubHeaderExample {
279  build() {
280    Column() {
281      SubHeader({
282        // 设置左侧select
283        select: {
284          options: [{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }],
285          value: 'selectDemo',
286          selected: 2,
287          onSelect: () => {
288            Prompt.showToast({ message: 'demo' });
289          }
290        },
291        operationType: OperationType.ICON_GROUP,
292        // 设置右侧icon
293        operationItem: [{
294          value: $r('sys.symbol.ohos_lungs'),
295          action: () => {
296            Prompt.showToast({ message: 'icon1' });
297          }
298        }, {
299          value: $r('sys.symbol.ohos_lungs'),
300          action: () => {
301            Prompt.showToast({ message: 'icon2' });
302          }
303        }, {
304          value: $r('sys.symbol.ohos_lungs'),
305          action: () => {
306            Prompt.showToast({ message: 'icon3' });
307          }
308        }],
309        // 设置右侧icon图标symbol样式
310        operationSymbolOptions: [{
311          fontWeight: FontWeight.Lighter,
312        }, {
313          renderingStrategy: SymbolRenderingStrategy.MULTIPLE_COLOR,
314          fontColor: [Color.Blue, Color.Grey, Color.Green],
315        }, {
316          renderingStrategy: SymbolRenderingStrategy.MULTIPLE_OPACITY,
317          fontColor: [Color.Blue, Color.Grey, Color.Green],
318        }]
319      })
320    }
321  }
322}
323```
324
325![zh-cn_image_subheader_example05](figures/zh-cn_image_subheader_example05.png)
326
327### 示例6(自定义标题内容)
328 该示例主要演示SubHeader设置titleBuilder自定义标题内容的效果。
329
330```ts
331import { Prompt, OperationType, SubHeader } from '@kit.ArkUI';
332
333@Entry
334@Component
335struct SubHeaderExample {
336  // 自定义左侧标题
337  @Builder
338  TitleBuilder(): void {
339    Text('自定义标题')
340      .fontSize(24)
341      .fontColor(Color.Blue)
342      .fontWeight(FontWeight.Bold)
343  }
344
345  build() {
346    Column() {
347      SubHeader({
348        // 调用TitleBuilder
349        titleBuilder: () => {
350          this.TitleBuilder();
351        },
352        primaryTitle: '一级标题',
353        secondaryTitle: '二级标题',
354        icon: $r('sys.symbol.ohos_star'),
355        operationType: OperationType.TEXT_ARROW,
356        operationItem: [{
357          value: '更多信息',
358          action: () => {
359            Prompt.showToast({ message: 'demo' });
360          }
361        }]
362      })
363    }
364  }
365}
366```
367![zh-cn_image_subheader_example06](figures/zh-cn_image_subheader_example06.png)
368
369### 示例7(自定义标题样式)
370该示例主要演示SubHeader设置标题和副标题字体样式以及标题内外边距的效果。
371
372```ts
373import { Prompt, OperationType, SubHeader, LengthMetrics, TextModifier } from '@kit.ArkUI';
374
375@Entry
376@Component
377struct SubHeaderExample {
378  // 设置主副标题文本颜色
379  @State primaryModifier: TextModifier = new TextModifier().fontColor(Color.Blue);
380  @State secondaryModifier: TextModifier = new TextModifier().fontColor(Color.Blue);
381
382  build() {
383    Column() {
384      SubHeader({
385        primaryTitle: 'primaryTitle',
386        secondaryTitle: 'secondaryTitle',
387        primaryTitleModifier: this.primaryModifier,
388        secondaryTitleModifier: this.secondaryModifier,
389        operationType: OperationType.TEXT_ARROW,
390        operationItem: [{
391          value: '更多信息',
392          action: () => {
393            Prompt.showToast({ message: 'demo' });
394          }
395        }],
396        // 标题内外间距
397        contentMargin: { start: LengthMetrics.vp(20), end: LengthMetrics.vp(20) },
398        contentPadding: { start: LengthMetrics.vp(20), end: LengthMetrics.vp(20) }
399      })
400    }
401  }
402}
403```
404
405![子标题7](figures/zh-cn_image_subheader_example07.png)
406
407
408### 示例8(右侧按钮自定义播报)
409从API version 18开始,该示例通过设置SubHeader的右侧按钮属性accessibilityText、accessibilityDescription、accessibilityLevel自定义屏幕朗读播报文本。
410```ts
411import { Prompt, OperationType, SubHeader } from '@kit.ArkUI';
412
413@Entry
414@Component
415struct SubHeaderExample {
416  build() {
417    Column() {
418      Divider().color('grey').width('100%').height('2vp')
419      SubHeader({
420        // 图标+二级标题, 右侧button
421        icon: $r('sys.media.ohos_ic_public_email'),
422        secondaryTitle: '二级标题',
423        operationType: OperationType.BUTTON,
424        operationItem: [{
425          value: '操作',
426          action: () => {
427            Prompt.showToast({ message: 'demo' })
428          }
429        }]
430      })
431      Divider().color('grey').width('100%').height('2vp')
432      SubHeader({
433        // 右侧text_arrow
434        primaryTitle: '一级标题',
435        secondaryTitle: '二级标题',
436        operationType: OperationType.TEXT_ARROW,
437        operationItem: [{
438          value: '更多',
439          action: () => {
440            Prompt.showToast({ message: 'demo' })
441          }
442        }]
443      })
444      Divider().color('grey').width('100%').height('2vp')
445      SubHeader({
446        //左侧select 右侧是icon_(依次获焦)
447        select: {
448          options: [{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }],
449          value: 'selectDemo',
450          selected: 0,
451          onSelect: (index: number, value?: string) => {
452            console.log(`SubHeader onSelect index : ${index}, value: ${value}`);
453          }
454        },
455        operationType: OperationType.ICON_GROUP,
456        operationItem: [{
457          value: $r('sys.media.ohos_ic_public_email'),
458          accessibilityText: '图标1',
459          accessibilityLevel: 'yes',
460        }, {
461          value: $r('sys.media.ohos_ic_public_email'),
462          accessibilityText: '图标2',
463          accessibilityLevel: 'no',
464        }, {
465          value: $r('sys.media.ohos_ic_public_email'),
466          accessibilityText: '图标3',
467          accessibilityDescription: '点击操作图标3',
468        }]
469      })
470      Divider().color('grey').width('100%').height('2vp')
471    }
472  }
473}
474```
475![figures/zh-cn_image_subheader_example08](figures/zh-cn_image_subheader_example08.png)
476
477### 示例9(右侧按钮设置默认获焦)
478从API version 18开始,该示例通过设置SubHeader的右侧按钮属性defaultFocus使其默认获焦。
479```ts
480import { Prompt, OperationType, SubHeader } from '@kit.ArkUI';
481
482@Entry
483@Component
484struct SubHeaderExample {
485  build() {
486    Column() {
487      SubHeader({
488        // 图标+二级标题, 右侧button
489        icon: $r('sys.media.ohos_ic_public_email'),
490        secondaryTitle: '二级标题',
491        operationType: OperationType.BUTTON,
492        operationItem: [{
493          value: '操作',
494          defaultFocus: true,
495          action: () => {
496            Prompt.showToast({ message: 'demo' })
497          }
498        }]
499      })
500    }
501  }
502}
503```
504![/SubHeaderDefaultFocus](figures/SubHeaderDefaultFocus.png)
505