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