子标题，用于列表项或内容项顶部，将该列表或内容划分为一个区块，子标题名称用来概括该区块内容。

说明

* 该组件从API version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
* 该组件仅可在Stage模型下使用。
* 如果SubHeader设置[通用属性](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-component-general-attributes)和[通用事件](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-component-general-events)，编译工具链会额外生成节点\_\_Common\_\_，并将通用属性或通用事件挂载在\_\_Common\_\_上，而不是直接应用到SubHeader本身。这可能导致开发者设置的通用属性或通用事件不生效或不符合预期，因此，不建议SubHeader设置通用属性和通用事件。

## 导入模块

PhonePC/2in1TabletTVWearable



```
1. import { SubHeader } from '@kit.ArkUI';
```

## 子组件

PhonePC/2in1TabletTVWearable

无

说明

不支持设置文本相关。

## SubHeader

PhonePC/2in1TabletTVWearable

SubHeader({icon?: ResourceStr, iconSymbolOptions?: SymbolOptions, primaryTitle?: ResourceStr, secondaryTitle?: ResourceStr, select?: SelectOptions, operationType?: OperationType, operationItem?: Array<OperationOption>, operationSymbolOptions?: Array<SymbolOptions>, primaryTitleModifier?: TextModifier, secondaryTitleModifier?: TextModifier, titleBuilder?: () => void, contentMargin?: LocalizedMargin, contentPadding?: LocalizedPadding, titleId?: string })

**装饰器类型：**@Component

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**设备行为差异：** 该接口在Wearable设备上使用时，应用程序运行异常，异常信息中提示接口未定义，在其他设备中可正常调用。

展开

| 名称 | 类型 | 必填 | 装饰器类型 | 说明 |
| --- | --- | --- | --- | --- |
| icon | [ResourceStr](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-types#resourcestr) | 否 | @Prop | 图标设置项。  默认值：undefined，表示不显示图标。  当使用secondaryTitle属性时，设置icon属性才会生效。  **元服务API：** 从API version 11开始，该接口支持在元服务中使用。 |
| iconSymbolOptions12+ | [SymbolOptions](/consumer/cn/doc/harmonyos-references/ohos-arkui-advanced-subheader#symboloptions12) | 否 | - | icon为[SymbolGlyph](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-symbolglyph)时的设置项。  默认值：undefined，表示不显示图标。  **元服务API：** 从API version 12开始，该接口支持在元服务中使用。 |
| primaryTitle | [ResourceStr](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-types#resourcestr) | 否 | @Prop | 标题内容。  默认值：undefined，表示不显示标题。  当同时使用primaryTitle、secondaryTitle、icon属性时，设置primaryTitle属性不生效。  **元服务API：** 从API version 11开始，该接口支持在元服务中使用。 |
| secondaryTitle | [ResourceStr](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-types#resourcestr) | 否 | @Prop | 副标题内容。  默认值：undefined，表示不显示副标题。  **元服务API：** 从API version 11开始，该接口支持在元服务中使用。 |
| select | [SelectOptions](/consumer/cn/doc/harmonyos-references/ohos-arkui-advanced-subheader#selectoptions) | 否 | - | select内容以及事件。  默认值：undefined，表示不显示下拉框。  **元服务API：** 从API version 11开始，该接口支持在元服务中使用。 |
| operationType | [OperationType](/consumer/cn/doc/harmonyos-references/ohos-arkui-advanced-subheader#operationtype) | 否 | @Prop | 操作区（右侧）元素样式。  默认值：OperationType.BUTTON  **元服务API：** 从API version 11开始，该接口支持在元服务中使用。 |
| operationItem | Array<[OperationOption](/consumer/cn/doc/harmonyos-references/ohos-arkui-advanced-subheader#operationoption)> | 否 | - | 操作区（右侧）的设置项。  默认值：undefined，表示不显示操作区。  **元服务API：** 从API version 11开始，该接口支持在元服务中使用。 |
| operationSymbolOptions12+ | Array<[SymbolOptions](/consumer/cn/doc/harmonyos-references/ohos-arkui-advanced-subheader#symboloptions12)> | 否 | - | operationType为OperationType.ICON\_GROUP，  operationItem设置多个图标，图标为[SymbolGlyph](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-symbolglyph)时的设置项。  默认值：undefined，表示不设置Symbol图标。  **元服务API：** 从API version 12开始，该接口支持在元服务中使用。 |
| primaryTitleModifier12+ | [TextModifier](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-attribute-modifier#自定义modifier) | 否 | - | 设置标题文本属性，如设置标题颜色、字体大小、字重等。  默认值：undefined，表示使用系统默认样式。  **元服务API：** 从API version 12开始，该接口支持在元服务中使用。 |
| secondaryTitleModifier12+ | [TextModifier](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-attribute-modifier#自定义modifier) | 否 | - | 设置副标题文本属性，如设置标题颜色、字体大小、字重等。  默认值：undefined，表示使用系统默认样式。  **元服务API：** 从API version 12开始，该接口支持在元服务中使用。 |
| titleBuilder12+ | () => void | 否 | @BuilderParam | 自定义标题区内容  默认值：undefined，表示不采用自定义标题定义标题。  **元服务API：** 从API version 12开始，该接口支持在元服务中使用。 |
| contentMargin12+ | [LocalizedMargin](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-types#localizedmargin12) | 否 | @Prop | 子标题外边距，不支持设置负数。  默认值：  {start: LengthMetrics.resource(  $r('sys.float.margin\_left')),  end: LengthMetrics.resource(  $r('sys.float.margin\_right'))}  **元服务API：** 从API version 12开始，该接口支持在元服务中使用。 |
| contentPadding12+ | [LocalizedPadding](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-types#localizedpadding12) | 否 | @Prop | 子标题内边距。  默认值：  左侧为副标题或副标题加图标时：  {start: LengthMetrics.vp(12), end: LengthMetrics.vp(12)}。  **元服务API：** 从API version 12开始，该接口支持在元服务中使用。 |
| titleAccessibilityText23+ | [ResourceStr](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-types#resourcestr) | 否 | @Prop | 设置标题自定义朗读内容。  默认值：undefined  值为undefined时，默认朗读组件显示的标题内容。  **元服务API：** 从API version 23开始，该接口支持在元服务中使用。 |
| titleId24+ | string | 否 | @Prop | 标题id。需要为标题设置id的时候设置此参数，缺省时不设置此参数。  默认值：undefined，表示不设置标题id。  **元服务API：** 从API version 24开始，该接口支持在元服务中使用。 |

## OperationType

PhonePC/2in1TabletTVWearable

定义子标题操作区的元素样式。

**元服务API：** 从API version 11开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**设备行为差异：** 该接口在Wearable设备上使用时，应用程序运行异常，异常信息中提示接口未定义，在其他设备中可正常调用。

展开

| 名称 | 值 | 说明 |
| --- | --- | --- |
| TEXT\_ARROW | 0 | 文本按钮（带右箭头）。 |
| BUTTON | 1 | 文本按钮（不带右箭头）。 |
| ICON\_GROUP | 2 | 图标按钮（最多支持配置三张图标）。 |
| LOADING | 3 | 加载动画。 |

## SelectOptions

PhonePC/2in1TabletTVWearable

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**设备行为差异：** 该接口在Wearable设备上使用时，应用程序运行异常，异常信息中提示接口未定义，在其他设备中可正常调用。

展开

| 名称 | 类型 | 只读 | 可选 | 说明 |
| --- | --- | --- | --- | --- |
| options | Array<[SelectOption](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-select#selectoption对象说明)> | 否 | 否 | 下拉选项内容。  **元服务API：** 从API version 11开始，该接口支持在元服务中使用。 |
| selected | number | 否 | 是 | 设置下拉菜单初始选项的索引。  取值范围：大于等于-1。  第一项的索引为0。  当不设置selected属性时，默认选择值为-1，菜单项不选中。  若设置数值小于-1，按不选中处理。  **元服务API：** 从API version 11开始，该接口支持在元服务中使用。 |
| value | [ResourceStr](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-types#resourcestr) | 否 | 是 | 设置下拉按钮本身的文本内容。  默认值：空字符串。  **说明**：如果文本大于列宽时，文本被截断。从API version 20开始，支持Resource类型。  **元服务API：** 从API version 11开始，该接口支持在元服务中使用。 |
| onSelect | (index: number, value?: string) => void | 否 | 是 | 下拉菜单选中某一项的回调。  - index：选中项的索引。  - value：选中项的值。  **元服务API：** 从API version 11开始，该接口支持在元服务中使用。 |
| defaultFocus18+ | boolean | 否 | 是 | 下拉按钮是否为默认焦点。  true：下拉按钮是默认焦点。  false：下拉按钮不是默认焦点。  默认值：false  **元服务API：** 从API version 18开始，该接口支持在元服务中使用。 |
| id24+ | string | 否 | 是 | 下拉按钮id。需要为下拉按钮设置id的时候设置此参数，缺省时不设置此参数。  默认值：undefined，表示不设置下拉按钮id。  **元服务API：** 从API version 24开始，该接口支持在元服务中使用。 |

## OperationOption

PhonePC/2in1TabletTVWearable

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**设备行为差异：** 该接口在Wearable设备上使用时，应用程序运行异常，异常信息中提示接口未定义，在其他设备中可正常调用。

展开

| 名称 | 类型 | 只读 | 可选 | 说明 |
| --- | --- | --- | --- | --- |
| value | [ResourceStr](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-types#resourcestr) | 否 | 否 | 文本内容。  **元服务API：** 从API version 11开始，该接口支持在元服务中使用。 |
| action | ()=>void | 否 | 是 | 子标题右侧按钮点击事件。  **元服务API：** 从API version 11开始，该接口支持在元服务中使用。 |
| accessibilityLevel18+ | string | 否 | 是 | 子标题右侧按钮无障碍重要性。用于控制当前项是否可被无障碍辅助服务所识别。  支持的值为：  "auto"：当前组件会转换"yes"。  "yes"：当前组件可被无障碍辅助服务所识别。  "no"：当前组件不可被无障碍辅助服务所识别。  "no-hide-descendants"：当前组件及其所有子组件不可被无障碍辅助服务所识别。  默认值："auto"  **元服务API：** 从API version 18开始，该接口支持在元服务中使用。 |
| accessibilityText18+ | [ResourceStr](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-types#resourcestr) | 否 | 是 | 子标题右侧按钮的无障碍文本属性。当组件不包含文本属性时，屏幕朗读选中此组件时不播报，使用者无法清楚地知道当前选中了什么组件。为了解决此场景，开发人员可为不包含文字信息的组件设置无障碍文本，当屏幕朗读选中此组件时播报无障碍文本的内容，帮助屏幕朗读的使用者清楚地知道自己选中了什么组件。  默认值：类型为TEXT\_ARROW和BUTTON时默认值为当前项value属性内容，其他类型默认值为“ ”。  **元服务API：** 从API version 18开始，该接口支持在元服务中使用。 |
| accessibilityDescription18+ | [ResourceStr](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-types#resourcestr) | 否 | 是 | 子标题右侧按钮的无障碍描述。此描述用于向用户详细解释当前组件，开发人员应为组件的这一属性提供较为详尽的文本说明，以协助用户理解即将执行的操作及其可能产生的后果。特别是当这些后果无法仅从组件的属性和无障碍文本中直接获知时。如果组件同时具备文本属性和无障碍说明属性，当组件被选中时，系统将首先播报组件的文本属性，随后播报无障碍说明属性的内容。  默认值：类型为LOADING时，默认值为“正在加载”，其他类型默认值为“单指双击即可执行”。  **元服务API：** 从API version 18开始，该接口支持在元服务中使用。 |
| defaultFocus18+ | boolean | 否 | 是 | 子标题右侧按钮是否为默认焦点。  true：子标题右侧按钮是默认焦点。  false：子标题右侧按钮不是默认焦点。  默认值：false  **元服务API：** 从API version 18开始，该接口支持在元服务中使用。 |
| id24+ | string | 否 | 是 | 子标题右侧按钮id。需要为子标题右侧按钮设置id的时候设置此参数，缺省时不设置此参数。  默认值：undefined，表示不设置子标题右侧按钮id。  **元服务API：** 从API version 24开始，该接口支持在元服务中使用。 |

## SymbolOptions12+

PhonePC/2in1TabletTVWearable

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**设备行为差异：** 该接口在Wearable设备上使用时，应用程序运行异常，异常信息中提示接口未定义，在其他设备中可正常调用。

展开

| 名称 | 类型 | 只读 | 可选 | 说明 |
| --- | --- | --- | --- | --- |
| fontColor | Array<[ResourceColor](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-types#resourcecolor)> | 否 | 是 | 设置[SymbolGlyph](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-symbolglyph)颜色。  默认值：不同渲染策略下默认值不同。 |
| fontSize | number | string | [Resource](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-types#resource) | 否 | 是 | 设置[SymbolGlyph](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-symbolglyph)大小。  number类型取值范围：大于等于0。  设置string类型时，支持number类型取值的字符串形式，可以附带单位，例如："10"，"10fp"。  默认值：系统默认值。 |
| fontWeight | number | [FontWeight](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-appendix-enums#fontweight) | string | 否 | 是 | 设置[SymbolGlyph](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-symbolglyph)粗细。  number类型取值[100,900]，取值间隔为100，默认为400，取值越大，字体越粗。  string类型仅支持number类型取值的字符串形式，例如“400”，以及“bold”、“bolder”、“lighter”、“regular” 、“medium”分别对应FontWeight中相应的枚举值。  默认值：FontWeight.Normal |
| renderingStrategy | [SymbolRenderingStrategy](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-symbolglyph#symbolrenderingstrategy11枚举说明) | 否 | 是 | 设置[SymbolGlyph](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-symbolglyph)渲染策略。  默认值：SymbolRenderingStrategy.SINGLE  **说明：**  $r('sys.symbol.ohos\_\*')中引用的资源仅ohos\_trash\_circle、ohos\_folder\_badge\_plus、ohos\_lungs支持分层与多色模式。 |
| effectStrategy | [SymbolEffectStrategy](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-symbolglyph#symboleffectstrategy11枚举说明) | 否 | 是 | 设置[SymbolGlyph](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-symbolglyph)动效策略。  默认值：SymbolEffectStrategy.NONE  **说明：**  $r('sys.symbol.ohos\_\*')中引用的资源仅ohos\_wifi支持层级动效模式。 |

## 事件

PhonePC/2in1TabletTVWearable

不支持[通用事件](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-component-general-events)。

## 示例

PhonePC/2in1TabletTVWearable

### 示例1（效率型子标题）

该示例主要演示子标题左侧为icon、secondaryTitle，右侧operationType为按钮类型。



```
1. import { Prompt, OperationType, SubHeader } from '@kit.ArkUI';

3. @Entry
4. @Component
5. struct SubHeaderExample {
6. build() {
7. Column() {
8. SubHeader({
9. icon: $r('sys.media.ohos_ic_public_email'),
10. secondaryTitle: '二级标题',
11. operationType: OperationType.BUTTON,
12. operationItem: [{
13. value: '操作',
14. action: () => {
15. Prompt.showToast({ message: 'demo' });
16. }
17. }]
18. })
19. }
20. }
21. }
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/c3/v3/MmfomMJBTaW-Trjv_SPIYA/zh-cn_image_0000002599359027.png?HW-CC-KV=V1&HW-CC-Date=20260511T035920Z&HW-CC-Expire=86400&HW-CC-Sign=4A5DE8F362D64482969988865D8B165CFAFB181C7BEB3539343F717951EF3D11)

### 示例2（双行文本内容型子标题）

该示例主要演示子标题左侧为primaryTitle、secondaryTitle，右侧operationType类型为TEXT\_ARROW。



```
1. import { Prompt, OperationType, SubHeader } from '@kit.ArkUI';

3. @Entry
4. @Component
5. struct SubHeaderExample {
6. build() {
7. Column() {
8. SubHeader({
9. primaryTitle: '一级标题',
10. secondaryTitle: '二级标题',
11. operationType: OperationType.TEXT_ARROW,
12. operationItem: [{
13. value: '更多',
14. action: () => {
15. Prompt.showToast({ message: 'demo' });
16. }
17. }]
18. })
19. }
20. }
21. }
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/a4/v3/SnAs8akhR5qD8mkROV96FA/zh-cn_image_0000002568919434.png?HW-CC-KV=V1&HW-CC-Date=20260511T035920Z&HW-CC-Expire=86400&HW-CC-Sign=4AD5E0AA93B955EF06A9C562B512701ED4014394E7B199C13A33A33AE06F2E68)

### 示例3（spinner型内容型子标题）

该示例主要演示子标题左侧为select，右侧operationType类型为ICON\_GROUP。



```
1. import { Prompt, OperationType, SubHeader } from '@kit.ArkUI';

3. @Entry
4. @Component
5. struct SubHeaderExample {
6. build() {
7. Column() {
8. SubHeader({
9. // 左侧为select选择器
10. select: {
11. options: [{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }],
12. value: 'selectDemo',
13. selected: 2,
14. onSelect: () => {
15. Prompt.showToast({ message: 'demo' });
16. }
17. },
18. operationType: OperationType.ICON_GROUP,
19. // 右侧为三个icon图标
20. operationItem: [{
21. value: $r('sys.media.ohos_ic_public_email'),
22. action: () => {
23. Prompt.showToast({ message: 'demo' })
24. }
25. }, {
26. value: $r('sys.media.ohos_ic_public_email'),
27. action: () => {
28. Prompt.showToast({ message: 'demo' });
29. }
30. }, {
31. value: $r('sys.media.ohos_ic_public_email'),
32. action: () => {
33. Prompt.showToast({ message: 'demo' });
34. }
35. }]
36. })
37. }
38. }
39. }
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/2c/v3/3E8FuJOOSFmKmk5RLNcLgg/zh-cn_image_0000002599478977.png?HW-CC-KV=V1&HW-CC-Date=20260511T035920Z&HW-CC-Expire=86400&HW-CC-Sign=45DEE6FDEB0019CAEA5EB40108CA37BDB1E95FE52105389F8552E36ABFE5F7A0)

### 示例4（设置左侧symbol图标）

该示例主要演示子标题左侧icon设置symbol图标。



```
1. import { Prompt, OperationType, SubHeader } from '@kit.ArkUI';

3. @Entry
4. @Component
5. struct SubHeaderExample {
6. build() {
7. Column() {
8. SubHeader({
9. // 设置icon为symbol图标
10. icon: $r('sys.symbol.ohos_wifi'),
11. iconSymbolOptions: {
12. effectStrategy: SymbolEffectStrategy.HIERARCHICAL,
13. },
14. secondaryTitle: '标题',
15. operationType: OperationType.BUTTON,
16. operationItem: [{
17. value: '操作',
18. action: () => {
19. Prompt.showToast({ message: 'demo' });
20. }
21. }]
22. })
23. }
24. }
25. }
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/6d/v3/AGetXZ3sSZqMq9F7nFQnRw/zh-cn_image_0000002568759786.gif?HW-CC-KV=V1&HW-CC-Date=20260511T035920Z&HW-CC-Expire=86400&HW-CC-Sign=4837E4F4BC080649F59BBC9CD0802276CD39B8D51C49D2568B33F24372E322EE)

### 示例5（设置右侧symbol图标）

该示例主要演示子标题operationType设置为OperationType.ICON\_GROUP，operationItem的value设置为symbol图标。



```
1. import { Prompt, OperationType, SubHeader } from '@kit.ArkUI';

3. @Entry
4. @Component
5. struct SubHeaderExample {
6. build() {
7. Column() {
8. SubHeader({
9. // 设置左侧select
10. select: {
11. options: [{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }],
12. value: 'selectDemo',
13. selected: 2,
14. onSelect: () => {
15. Prompt.showToast({ message: 'demo' });
16. }
17. },
18. operationType: OperationType.ICON_GROUP,
19. // 设置右侧icon
20. operationItem: [{
21. value: $r('sys.symbol.ohos_lungs'),
22. action: () => {
23. Prompt.showToast({ message: 'icon1' });
24. }
25. }, {
26. value: $r('sys.symbol.ohos_lungs'),
27. action: () => {
28. Prompt.showToast({ message: 'icon2' });
29. }
30. }, {
31. value: $r('sys.symbol.ohos_lungs'),
32. action: () => {
33. Prompt.showToast({ message: 'icon3' });
34. }
35. }],
36. // 设置右侧icon图标symbol样式
37. operationSymbolOptions: [{
38. fontWeight: FontWeight.Lighter,
39. }, {
40. renderingStrategy: SymbolRenderingStrategy.MULTIPLE_COLOR,
41. fontColor: [Color.Blue, Color.Grey, Color.Green],
42. }, {
43. renderingStrategy: SymbolRenderingStrategy.MULTIPLE_OPACITY,
44. fontColor: [Color.Blue, Color.Grey, Color.Green],
45. }]
46. })
47. }
48. }
49. }
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/7d/v3/EpjkhI7TTO6MiBuaPXKMug/zh-cn_image_0000002599359029.png?HW-CC-KV=V1&HW-CC-Date=20260511T035920Z&HW-CC-Expire=86400&HW-CC-Sign=99694F0381AC0E6314918AA6E870F0636617B1B3567957ABD6406331262D79D2)

### 示例6（自定义标题内容）

该示例主要演示SubHeader设置titleBuilder自定义标题内容的效果。



```
1. import { Prompt, OperationType, SubHeader } from '@kit.ArkUI';

3. @Entry
4. @Component
5. struct SubHeaderExample {
6. // 自定义左侧标题
7. @Builder
8. TitleBuilder(): void {
9. Text('自定义标题')
10. .fontSize(24)
11. .fontColor(Color.Blue)
12. .fontWeight(FontWeight.Bold)
13. }

15. build() {
16. Column() {
17. SubHeader({
18. // 调用TitleBuilder
19. titleBuilder: () => {
20. this.TitleBuilder();
21. },
22. primaryTitle: '一级标题',
23. secondaryTitle: '二级标题',
24. icon: $r('sys.symbol.ohos_star'),
25. operationType: OperationType.TEXT_ARROW,
26. operationItem: [{
27. value: '更多信息',
28. action: () => {
29. Prompt.showToast({ message: 'demo' });
30. }
31. }]
32. })
33. }
34. }
35. }
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/2f/v3/a5AbsXZySRq8ibdWjRe2RA/zh-cn_image_0000002568919436.png?HW-CC-KV=V1&HW-CC-Date=20260511T035920Z&HW-CC-Expire=86400&HW-CC-Sign=36D390BF2005E3E21C0B0ECE59B8177894DEF5AAB20106E03A734A19F00DB841)

### 示例7（自定义标题样式）

该示例主要演示SubHeader设置标题和副标题字体样式以及标题内外边距的效果。



```
1. import { Prompt, OperationType, SubHeader, LengthMetrics, TextModifier } from '@kit.ArkUI';

3. @Entry
4. @Component
5. struct SubHeaderExample {
6. // 设置主副标题文本颜色
7. @State primaryModifier: TextModifier = new TextModifier().fontColor(Color.Blue);
8. @State secondaryModifier: TextModifier = new TextModifier().fontColor(Color.Blue);

10. build() {
11. Column() {
12. SubHeader({
13. primaryTitle: 'primaryTitle',
14. secondaryTitle: 'secondaryTitle',
15. primaryTitleModifier: this.primaryModifier,
16. secondaryTitleModifier: this.secondaryModifier,
17. operationType: OperationType.TEXT_ARROW,
18. operationItem: [{
19. value: '更多信息',
20. action: () => {
21. Prompt.showToast({ message: 'demo' });
22. }
23. }],
24. // 标题内外间距
25. contentMargin: { start: LengthMetrics.vp(20), end: LengthMetrics.vp(20) },
26. contentPadding: { start: LengthMetrics.vp(20), end: LengthMetrics.vp(20) }
27. })
28. }
29. }
30. }
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/34/v3/jAXDFHhyTI6hix2Vv3R91Q/zh-cn_image_0000002599478979.png?HW-CC-KV=V1&HW-CC-Date=20260511T035920Z&HW-CC-Expire=86400&HW-CC-Sign=54558DF69141BEC6268C5B85E18ACCBC1E3FFE6B09175E90A1834F56FFEDA25B)

### 示例8（右侧按钮自定义播报）

从API version 18开始，该示例通过设置SubHeader的右侧按钮属性accessibilityText、accessibilityDescription、accessibilityLevel自定义屏幕朗读播报文本。



```
1. import { Prompt, OperationType, SubHeader } from '@kit.ArkUI';

3. @Entry
4. @Component
5. struct SubHeaderExample {
6. build() {
7. Column() {
8. Divider().color('grey').width('100%').height('2vp')
9. SubHeader({
10. // 图标+二级标题, 右侧button
11. icon: $r('sys.media.ohos_ic_public_email'),
12. secondaryTitle: '二级标题',
13. operationType: OperationType.BUTTON,
14. operationItem: [{
15. value: '操作',
16. action: () => {
17. Prompt.showToast({ message: 'demo' })
18. }
19. }]
20. })
21. Divider().color('grey').width('100%').height('2vp')
22. SubHeader({
23. // 右侧text_arrow
24. primaryTitle: '一级标题',
25. secondaryTitle: '二级标题',
26. operationType: OperationType.TEXT_ARROW,
27. operationItem: [{
28. value: '更多',
29. action: () => {
30. Prompt.showToast({ message: 'demo' })
31. }
32. }]
33. })
34. Divider().color('grey').width('100%').height('2vp')
35. SubHeader({
36. // 左侧select 右侧是icon_(依次获焦)
37. select: {
38. options: [{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }],
39. value: 'selectDemo',
40. selected: 0,
41. onSelect: (index: number, value?: string) => {
42. console.info(`SubHeader onSelect index : ${index}, value: ${value}`);
43. }
44. },
45. operationType: OperationType.ICON_GROUP,
46. operationItem: [{
47. value: $r('sys.media.ohos_ic_public_email'),
48. accessibilityText: '图标1',
49. accessibilityLevel: 'yes',
50. }, {
51. value: $r('sys.media.ohos_ic_public_email'),
52. accessibilityText: '图标2',
53. accessibilityLevel: 'no',
54. }, {
55. value: $r('sys.media.ohos_ic_public_email'),
56. accessibilityText: '图标3',
57. accessibilityDescription: '点击操作图标3',
58. }]
59. })
60. Divider().color('grey').width('100%').height('2vp')
61. }
62. }
63. }
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/ae/v3/B5NGJvS_R26vFrNzXVIbVQ/zh-cn_image_0000002568759788.png?HW-CC-KV=V1&HW-CC-Date=20260511T035920Z&HW-CC-Expire=86400&HW-CC-Sign=792D26219861CA52522ACF54FBCC0D3D6BF8EDFD1ACB3F2E7547C18E6FEB418C)

### 示例9（右侧按钮设置默认获焦）

在获焦状态下，该示例通过设置SubHeader的右侧按钮属性defaultFocus使其默认获焦。

从API version 18开始，在[OperationOption](/consumer/cn/doc/harmonyos-references/ohos-arkui-advanced-subheader#operationoption)中新增defaultFocus接口。



```
1. import { Prompt, OperationType, SubHeader } from '@kit.ArkUI';

3. @Entry
4. @Component
5. struct SubHeaderExample {
6. build() {
7. Column() {
8. SubHeader({
9. // 图标+二级标题, 右侧button
10. icon: $r('sys.media.ohos_ic_public_email'),
11. secondaryTitle: '二级标题',
12. operationType: OperationType.BUTTON,
13. operationItem: [{
14. value: '操作',
15. defaultFocus: true,
16. action: () => {
17. Prompt.showToast({ message: 'demo' })
18. }
19. }]
20. })
21. }
22. }
23. }
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/7f/v3/FgpJ0ad0Tf2xqDbRl67e-A/zh-cn_image_0000002599359031.png?HW-CC-KV=V1&HW-CC-Date=20260511T035920Z&HW-CC-Expire=86400&HW-CC-Sign=65DE09D54C53BEC6E4BA1EFD19F2586675E8D260615503037725904E5B4EC3FA)