1# SubHeader 2 3 4子标题，用于列表项顶部，将该组列表划分为一个区块，子标题名称用来概括该区块内容。也可以用于内容项顶部，子标题名称用来概括该区块内容。 5 6 7> **说明：** 8> 9> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 10 11 12## 导入模块 13 14```ts 15import { SubHeader } from '@kit.ArkUI' 16``` 17 18 19## 子组件 20 21无 22 23## 属性 24 25支持[通用属性](ts-universal-attributes-size.md)。 26 27> **说明：** 28> 29> 不支持设置文本相关。 30 31## SubHeader 32 33SubHeader({icon?: ResourceStr, iconSymbolOptions?: SymbolOptions, primaryTitle?: ResourceStr, secondaryTitle?: ResourceStr, select?: SelectOptions, operationType?: OperationType, operationItem?: Array<OperationOption>, operationSymbolOptions?: Array<SymbolOptions>}) 34 35**装饰器类型：**\@Component 36 37**系统能力：** SystemCapability.ArkUI.ArkUI.Full 38 39 40**参数：** 41 42 43| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 44| -------- | -------- | -------- | -------- | -------- | 45| icon | [ResourceStr](ts-types.md#resourcestr) | 否 | \@Prop | 图标设置项。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 46| iconSymbolOptions<sup>12+</sup> | [SymbolOptions](#symboloptions12) | 否 | - | icon为[Symbol资源](ts-basic-components-symbolGlyph.md)时的设置项。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 47| primaryTitle | [ResourceStr](ts-types.md#resourcestr) | 否 | \@Prop | 标题内容。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 48| secondaryTitle | [ResourceStr](ts-types.md#resourcestr) | 否 | \@Prop | 副标题内容。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 49| select | [SelectOptions](#selectoptions) | 否 | - | select内容以及事件。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 50| operationType | [OperationType](#operationtype) | 否 | \@Prop | 操作区(右侧)元素样式。<br/>默认值：OperationType.BUTTON<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 51| operationItem | Array<[OperationOption](#operationoption)> | 否 | - | 操作区（右侧）的设置项。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 52| operationSymbolOptions<sup>12+</sup> | Array<[SymbolOptions](#symboloptions12)> | 否 | - | operationType为OperationType.ICON_GROUP，<br/>operationItem设置多个图标，图标为[Symbol资源](ts-basic-components-symbolGlyph.md)时的设置项。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 53| primaryTitleModifier<sup>12+</sup> | [TextModifier](ts-universal-attributes-attribute-modifier.md) | 否 | - | 设置标题文本属性，如设置标题颜色、字体大小、字重等。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 54| secondaryTitleModifier<sup>12+</sup> | [TextModifier](ts-universal-attributes-attribute-modifier.md) | 否 | - | 设置副标题文本属性，如设置标题颜色、字体大小、字重等。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 55| titleBuilder<sup>12+</sup> | () => void | 否 | @BuildParam | 自定义标题区内容<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 56| 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开始，该接口支持在原子化服务中使用。 | 57| contentPadding<sup>12+</sup> | [LocalizedPadding](ts-types.md#localizedpadding12) | 否 | @Prop | 子标题内边距。<br />默认值：<br />左侧为副标题或副标题加图标时：<br /> {start: LengthMetircs.vp(12), end: LengthMetrics.vp(12)}。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 58 59 60## OperationType 61 62**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 63 64**系统能力：** SystemCapability.ArkUI.ArkUI.Full 65 66| 名称 | 值 | 说明 | 67| -------- | -------- | -------- | 68| TEXT_ARROW | 0 | 文本按钮（带右箭头）。 | 69| BUTTON | 1 | 文本按钮（不带右箭头）。 | 70| ICON_GROUP | 2 | 图标按钮（最多支持配置三张图标）。 | 71| LOADING | 3 | 加载动画。 | 72 73## SelectOptions 74 75**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 76 77**系统能力：** SystemCapability.ArkUI.ArkUI.Full 78 79| 名称 | 类型 | 必填 | 说明 | 80| -------- | -------- | -------- | -------- | 81| options | Array<[SelectOption](ts-basic-components-select.md#selectoption对象说明)> | 是 | 下拉选项内容。 | 82| selected | number | 否 | 设置下拉菜单初始选项的索引。<br/>第一项的索引为0。<br/>当不设置selected属性时，<br/>默认选择值为-1，菜单项不选中。 | 83| value | string | 否 | 设置下拉按钮本身的文本内容。 | 84| onSelect | (index: number, value?: string) => void | 否 | 下拉菜单选中某一项的回调。<br/>- index：选中项的索引。<br/>- value：选中项的值。 | 85 86## OperationOption 87 88**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 89 90**系统能力：** SystemCapability.ArkUI.ArkUI.Full 91 92| 名称 | 类型 | 必填 | 说明 | 93| -------- | -------- | -------- | -------- | 94| value | [ResourceStr](ts-types.md#resourcestr) | 是 | 文本内容。 | 95| action | ()=>void | 否 | 事件。 | 96 97## SymbolOptions<sup>12+</sup> 98 99**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 100 101**系统能力：** SystemCapability.ArkUI.ArkUI.Full 102 103| 名称 | 类型 | 必填 | 说明 | 104| -------- | -------- | -------- | -------- | 105| fontColor | Array<[ResourceColor](ts-types.md#resourcecolor)> | 否 | 设置[Symbol资源](ts-basic-components-symbolGlyph.md)颜色。<br/>默认值：不同渲染策略下默认值不同。 | 106| fontSize | number \|string \|[Resource](ts-types.md#Resource) | 否 | 设置[Symbol资源](ts-basic-components-symbolGlyph.md)大小。<br/>默认值：系统默认值。 | 107| fontWeight | number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string | 否 | 设置[Symbol资源](ts-basic-components-symbolGlyph.md)粗细。<br/>number类型取值[100,900]，取值间隔为100，默认为400，取值越大，字体越粗。<br/>string类型仅支持number类型取值的字符串形式，例如“400”，以及“bold”、“bolder”、“lighter”、“regular” 、“medium”分别对应FontWeight中相应的枚举值。<br/>默认值：FontWeight.Normal。 | 108| renderingStrategy | [SymbolRenderingStrategy](ts-basic-components-symbolGlyph.md#symbolrenderingstrategy11枚举说明) | 否 | 设置[Symbol资源](ts-basic-components-symbolGlyph.md)渲染策略。<br/>默认值：SymbolRenderingStrategy.SINGLE。<br/>**说明：**<br/>$r('sys.symbol.ohos_*')中引用的资源仅ohos_trash_circle、ohos_folder_badge_plus、ohos_lungs支持分层与多色模式。 | 109| effectStrategy | [SymbolEffectStrategy](ts-basic-components-symbolGlyph.md#symboleffectstrategy11枚举说明) | 否 | 设置[Symbol资源](ts-basic-components-symbolGlyph.md)动效策略。<br/>默认值：SymbolEffectStrategy.NONE。<br/>**说明：**<br/>$r('sys.symbol.ohos_*')中引用的资源仅ohos_wifi支持层级动效模式。 | 110 111## 事件 112支持[通用事件](ts-universal-events-click.md) 113 114## 示例 115### 示例1 116 117```ts 118import { promptAction, OperationType, SubHeader } from '@kit.ArkUI' 119 120@Entry 121@Component 122struct SubHeaderExample { 123 build() { 124 Column() { 125 SubHeader({ 126 icon: $r('app.media.ic_public_community_messages'), 127 secondaryTitle: '二级标题', 128 operationType: OperationType.BUTTON, 129 operationItem: [{ value: '操作', 130 action: () => { 131 promptAction.showToast({ message: 'demo' }) 132 } 133 }] 134 }) 135 } 136 } 137} 138``` 139 140 141 142### 示例2 143 144```ts 145import { promptAction, OperationType, SubHeader } from '@kit.ArkUI' 146 147@Entry 148@Component 149struct SubHeaderExample { 150 build() { 151 Column() { 152 SubHeader({ 153 primaryTitle: '一级标题', 154 secondaryTitle: '二级标题', 155 operationType: OperationType.TEXT_ARROW, 156 operationItem: [{ value: '更多', 157 action: () => { 158 promptAction.showToast({ message: 'demo' }) 159 } 160 }] 161 }) 162 } 163 } 164} 165``` 166 167 168 169### 示例3 170 171```ts 172import { promptAction, OperationType, SubHeader } from '@kit.ArkUI' 173 174@Entry 175@Component 176struct SubHeaderExample { 177 build() { 178 Column() { 179 SubHeader({ 180 select: { 181 options: [{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }], 182 value: 'selectdemo', 183 selected: 2, 184 onSelect: (index: number, value?: string) => { 185 promptAction.showToast({ message: 'demo' }) 186 } 187 }, 188 operationType: OperationType.ICON_GROUP, 189 operationItem: [{ 190 value: $r('app.media.ic_public_community_messages'), 191 action: () => { 192 promptAction.showToast({ message: 'demo' }) 193 } 194 }, { 195 value: $r('app.media.ic_public_community_messages'), 196 action: () => { 197 promptAction.showToast({ message: 'demo' }) 198 } 199 }, { 200 value: $r('app.media.ic_public_community_messages'), 201 action: () => { 202 promptAction.showToast({ message: 'demo' }) 203 } 204 }] 205 }) 206 } 207 } 208} 209``` 210 211 212 213### 示例4 214 215```ts 216 217import { promptAction, OperationType, SubHeader } from '@kit.ArkUI' 218 219@Entry 220@Component 221struct SubHeaderExample { 222 build() { 223 Column() { 224 SubHeader({ 225 icon: $r('sys.symbol.ohos_wifi'), 226 iconSymbolOptions: { 227 effectStrategy: SymbolEffectStrategy.HIERARCHICAL, 228 }, 229 secondaryTitle: '标题', 230 operationType: OperationType.BUTTON, 231 operationItem: [{ value: '操作', 232 action: () => { 233 promptAction.showToast({ message: 'demo' }) 234 } 235 }] 236 }) 237 } 238 } 239} 240``` 241 242 243 244### 示例5 245 246```ts 247import { promptAction, OperationType, SubHeader } from '@kit.ArkUI' 248 249@Entry 250@Component 251struct SubHeaderExample { 252 build() { 253 Column() { 254 SubHeader({ 255 select: { 256 options: [{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }], 257 value: 'selectdemo', 258 selected: 2, 259 onSelect: (index: number, value?: string) => { 260 promptAction.showToast({ message: 'demo' }) 261 } 262 }, 263 operationType: OperationType.ICON_GROUP, 264 operationItem: [{ 265 value: $r('sys.symbol.ohos_lungs'), 266 action: () => { 267 promptAction.showToast({ message: 'icon1' }) 268 } 269 }, { 270 value: $r('sys.symbol.ohos_lungs'), 271 action: () => { 272 promptAction.showToast({ message: 'icon2' }) 273 } 274 }, { 275 value: $r('sys.symbol.ohos_lungs'), 276 action: () => { 277 promptAction.showToast({ message: 'icon3' }) 278 } 279 }], 280 operationSymbolOptions: [{ 281 fontWeight: FontWeight.Lighter, 282 }, { 283 renderingStrategy: SymbolRenderingStrategy.MULTIPLE_COLOR, 284 fontColor: [Color.Blue, Color.Grey, Color.Green], 285 }, { 286 renderingStrategy: SymbolRenderingStrategy.MULTIPLE_OPACITY, 287 fontColor: [Color.Blue, Color.Grey, Color.Green], 288 }] 289 }) 290 } 291 } 292} 293``` 294 295 296 297### 示例6 298 299```ts 300// 该示例主要演示SubHeader设置titleBuilder自定义标题内容的效果。 301import { promptAction, OperationType, SubHeader } from '@kit.ArkUI'; 302 303@Entry 304@Component 305struct SubHeaderExample { 306 @Builder 307 TitleBuilder(): void { 308 Text('自定义标题') 309 .fontSize(24) 310 .fontColor(Color.Red) 311 .fontWeight(FontWeight.Bold) 312 } 313 314 build() { 315 Column() { 316 SubHeader({ 317 titleBuilder: () => { 318 this.TitleBuilder(); 319 }, 320 primaryTitle: '一级标题', 321 secondaryTitle: '二级标题', 322 icon: $r('sys.symbol.ohos_star'), 323 operationType: OperationType.TEXT_ARROW, 324 operationItem: [{ 325 value: '更多信息', 326 action: () => { 327 promptAction.showToast({ message: 'demo'}) 328 } 329 }] 330 }) 331 } 332 } 333} 334``` 335 336 337 338### 示例7 339 340```ts 341// 该示例主要演示SubHeader设置标题和副标题字体样式以及标题内外边距的效果。 342import { promptAction, OperationType, SubHeader, LengthMetrics, TextModifier } from '@kit.ArkUI'; 343 344@Entry 345@Component 346struct SubHeaderExample { 347 @State primaryModifier: TextModifier = new TextModifier().fontColor(Color.Red); 348 @State secondaryModifier: TextModifier = new TextModifier().fontColor(Color.Red); 349 350 build() { 351 Column() { 352 SubHeader({ 353 primaryTitle: 'primaryTitle', 354 secondaryTitle: 'secondaryTitle', 355 primaryTitleModifier: this.primaryModifier, 356 secondaryTitleModifier: this.secondaryModifier, 357 operationType: OperationType.TEXT_ARROW, 358 operationItem: [{ 359 value: '更多信息', 360 action: () => { 361 promptAction.showToast({ message: 'demo'}) 362 } 363 }], 364 contentMargin: { start: LengthMetrics.vp(20), end: LengthMetrics.vp(20) }, 365 contentPadding: { start: LengthMetrics.vp(20), end: LengthMetrics.vp(20) } 366 }) 367 } 368 } 369} 370``` 371 372
