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