1# SubHeaderV2 2 3 4子标题，用于列表项顶部，将该组列表划分为一个区块，子标题名称用来概括该区块内容。也可以用于内容项顶部，子标题名称用来概括该区块内容。 5 6该组件基于[状态管理V2](../../../ui/state-management/arkts-state-management-overview.md#状态管理v2)实现，相较于[状态管理V1](../../../ui/state-management/arkts-state-management-overview.md#状态管理v1)，状态管理V2增强了对数据对象的深度观察与管理能力，不再局限于组件层级。借助状态管理V2，开发者可以通过该组件更灵活地控制子标题的数据和状态，实现更高效的用户界面刷新。 7 8 9 10> **说明：** 11> 12> - 该组件从API version 18开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 13> 14> - 该组件不支持在Wearable设备上使用。 15 16 17 18## 导入模块 19 20```ts 21import { SubHeader } from '@kit.ArkUI'; 22``` 23 24 25## 子组件 26 27无 28 29## 属性 30 31不支持[通用属性](ts-component-general-attributes.md)。 32 33## SubHeaderV2 34 35SubHeaderV2({ 36icon?: SubHeaderV2IconType, 37title?: SubHeaderV2Title, 38select?: SubHeaderV2Select, 39operationType?: SubHeaderV2OperationType, 40operationItems?: SubHeaderV2OperationItem 41}) 42 43子标题，用于列表项顶部，将该组列表划分为一个区块，子标题名称用来概括该区块内容。也可以用于内容项顶部，子标题名称用来概括该区块内容。 44 45**装饰器类型：** @ComponentV2 46 47**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 48 49**系统能力：** SystemCapability.ArkUI.ArkUI.Full 50 51| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 52| -------- |---------------------------------------------------------| -------- | -------- |----------------------------------------| 53| icon| [SubHeaderV2IconType](#subheaderv2icontype) | 否 | @Param | 图标设置项。<br />默认值：undefined | 54| title| [SubHeaderV2Title](#subheaderv2title) | 否 | @Param| 标题设置项。<br />默认值：undefined | 55| select| [SubHeaderV2Select](#subheaderv2select) | 否 | @Param | select内容以及事件。<br />默认值：undefined | 56| operationType | [SubHeaderV2OperationType](#subheaderv2operationtype) | 否 | @Param| 操作区元素样式。<br />默认值：OperationType.BUTTON | 57| operationItems | [SubHeaderV2OperationItem](#subheaderv2operationitem)[] | 否 | @Param| 操作区的设置项。<br />默认值：undefined | 58| titleBuilder | [SubHeaderV2TitleBuilder](#subheaderv2titlebuilder) | 否 | @BuilderParam | 自定义标题区内容。<br />默认值：() => void | 59 60## SubHeaderV2IconType 61 62type SubHeaderV2IconType = ResourceStr | SymbolGlyphModifier 63 64图标内容的联合类型。 65 66**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 67 68**系统能力：** SystemCapability.ArkUI.ArkUI.Full 69 70| 类型 | 说明 | 71| ----------------------------- |------------------------| 72| ResourceStr | 资源类型，用于定义普通图标。 | 73| SymbolGlyphModifier | Symbol类型，用于定义Symbol图标。 | 74 75## SubHeaderV2Title 76标题设置项 77 78**装饰器类型：** @ObservedV2 79 80### 属性 81 82**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 83 84**系统能力：** SystemCapability.ArkUI.ArkUI.Full 85 86| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 87| -------- | -------- | -------- | -------- |------------------------------| 88| primaryTitle| [ResourceStr](ts-types.md#resourcestr) | 否 | @Trace | 标题内容。<br />默认值：undefined | 89| secondaryTitle| [ResourceStr](ts-types.md#resourcestr) | 否 | @Trace | 副标题内容。<br />默认值：undefined | 90| primaryTitleModifier| [TextModifier](ts-universal-attributes-attribute-modifier.md) | 否 | @Trace | 设置标题文本属性，如设置标题颜色、字体大小、字重等。<br />默认值：undefined | 91| secondaryTitleModifier| [TextModifier](ts-universal-attributes-attribute-modifier.md) | 否 | @Trace | 设置副标题文本属性，如设置副标题颜色、字体大小、字重等。<br />默认值：undefined | 92 93### constructor 94 95constructor(options: SubHeaderV2TitleOptions) 96 97标题内容信息SubHeaderV2Title构造函数。 98 99**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 100 101**系统能力：** SystemCapability.ArkUI.ArkUI.Full 102 103**参数：** 104 105| 参数名 | 类型 | 必填 | 说明 | 106| --------- |-----------------------------------------------------| ------ | ------------------ | 107| options | [SubHeaderV2TitleOptions](#subheaderv2titleoptions) | 是 | 标题内容信息。 | 108 109## SubHeaderV2TitleOptions 110 111用于构建SubHeaderV2Title对象。 112 113**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 114 115**系统能力：** SystemCapability.ArkUI.ArkUI.Full 116 117| 名称 | 类型 | 必填 | 说明 | 118| -------- | -------- | -------- |-----------------------------| 119| primaryTitle| [ResourceStr](ts-types.md#resourcestr) | 否 | 标题内容。<br />默认值：undefined | 120| secondaryTitle| [ResourceStr](ts-types.md#resourcestr) | 否 | 副标题内容。<br />默认值：undefined | 121| primaryTitleModifier| [TextModifier](ts-universal-attributes-attribute-modifier.md) | 否 | 设置标题文本属性，如设置副标题颜色、字体大小、字重等。<br />默认值：undefined | 122| secondaryTitleModifier| [TextModifier](ts-universal-attributes-attribute-modifier.md) | 否 | 设置副标题文本属性，如设置标题颜色、字体大小、字重等。<br />默认值：undefined | 123 124## SubHeaderV2Select 125 126select内容以及事件。 127 128**装饰器类型：** @ObservedV2 129 130### 属性 131 132**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 133 134**系统能力：** SystemCapability.ArkUI.ArkUI.Full 135 136| 名称 | 类型 | 必填 | 装饰器类型| 说明 | 137| -------- |------------------------------------------------------------------| -------- | -------- |---------------------------------------------------------------------------| 138| options | [SelectOption](ts-basic-components-select.md#selectoption对象说明)[] | 是 | @Trace | 下拉选项内容。 | 139| selectedIndex | number | 否 |@Trace | 设置下拉菜单初始选项的索引。<br />第一项的索引为0。<br />当不设置selected属性时，<br />默认选择值为-1，菜单项不选中。 | 140| selectedContent | string | 否 | @Trace | 设置下拉按钮本身的文本内容。默认值'' | 141| onSelect | [SubHeaderV2SelectOnSelect](#subheaderv2selectonselect) | 否 | @Trace | 下拉菜单选中某一项的回调。 <br />默认值：undefined | 142| defaultFocus | boolean | 否 | @Trace |下拉按钮是否为默认焦点。<br/>true：下拉按钮是默认焦点。<br/>false：下拉按钮不是默认焦点。<br />默认值：false | 143 144### constructor 145 146constructor(options: SubHeaderV2SelectOptions) 147 148select内容以及事件构造函数。 149 150**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 151 152**系统能力：** SystemCapability.ArkUI.ArkUI.Full 153 154**参数：** 155 156| 参数名 | 类型 | 必填 | 说明 | 157| --------- |-------------------------------| ------ | ------------------ | 158| options | [SubHeaderV2SelectOptions](#subheaderv2selectoptions) | 是 | 下拉选项信息。 | 159 160## SubHeaderV2SelectOptions 161 162用于构建SubHeaderV2Select对象。 163 164**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 165 166**系统能力：** SystemCapability.ArkUI.ArkUI.Full 167 168| 名称 | 类型 | 必填 | 说明 | 169| -------- |------------------------------------------------------------------| -------- |---------------------------------------------------------------------------| 170| options | [SelectOption](ts-basic-components-select.md#selectoption对象说明)[] | 是 | 下拉选项内容。 | 171| selectedIndex | number | 否 | 设置下拉菜单初始选项的索引。<br />第一项的索引为0。<br />当不设置selected属性时，<br />默认选择值为-1，菜单项不选中。 | 172| selectedContent | string | 否 | 设置下拉按钮本身的文本内容。默认值''。 | 173| onSelect | [SubHeaderV2SelectOnSelect](#subheaderv2selectonselect) | 否 | 下拉菜单选中某一项的回调。<br />默认值：undefined | 174| defaultFocus | boolean | 否 | 下拉按钮是否为默认焦点。<br/>true：下拉按钮是默认焦点。<br/>false：下拉按钮不是默认焦点。<br />默认值：false | 175 176## SubHeaderV2SelectOnSelect 177 178type SubHeaderV2SelectOnSelect = (selectedIndex: number, selectedContent?: string) => void 179 180下拉菜单选中某一项的回调类型。 181 182**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 183 184**系统能力：** SystemCapability.ArkUI.ArkUI.Full 185 186**参数：** 187 188| 类型 | 说明 | 189|:--------------|:--------------------------------------------| 190| selectIndex | 下拉菜单选中某一项的回调类型。表示选中项的索引。 | 191| selectContent | 下拉菜单选中某一项的回调类型。表示选中项的值。| 192 193## SubHeaderV2OperationType 194 195操作区元素样式。 196 197**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 198 199**系统能力：** SystemCapability.ArkUI.ArkUI.Full 200 201| 名称 | 值 | 说明 | 202| -------- | -------- | -------- | 203| TEXT_ARROW | 0 | 文本按钮（带右箭头）。 | 204| BUTTON | 1 | 文本按钮（不带右箭头）。 | 205| ICON_GROUP | 2 | 图标按钮（最多支持配置三张图标）。 | 206| LOADING | 3 | 加载动画。 | 207 208## SubHeaderV2OperationItemType 209 210type SubHeaderV2OperationItemType = ResourceStr | SymbolGlyphModifier 211 212操作区元素内容的联合类型。 213 214**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 215 216**系统能力：** SystemCapability.ArkUI.ArkUI.Full 217 218| 类型 | 说明 | 219| ----------------------------- |-----------------------------------| 220| ResourceStr | 字符串类型用于定义文本显示或普通图标；资源类型，用于定义普通图标。 | 221| SymbolGlyphModifier | Symbol类型，用于定义Symbol图标。 | 222 223## SubHeaderV2OperationItem 224 225操作区的设置项。 226 227**装饰器类型：** @ObservedV2 228 229### 属性 230 231**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 232 233**系统能力：** SystemCapability.ArkUI.ArkUI.Full 234 235| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 236| -------- | -------- | -------- | -------- |-----------------------------------------------------| 237| content | [SubHeaderV2OperationItemType](#subheaderv2operationitemtype) | 是 | @Trace | 操作区元素内容。 | 238| action | SubHeaderV2OperationItemAction | 否 | @Trace | 操作区事件。默认值() => void。 | 239| accessibilityText |[ResourceStr](ts-types.md#resourcestr) | 否 |@Trace | 子标题右侧icon图标无障碍描述。 <br />默认值：undefined | 240| accessibilityLevel |[string](ts-types.md#resourcestr) | 否 |@Trace | 子标题右侧icon图标无障碍重要性。<br>默认值: “yes”。 | 241| accessibilityDescription|[ResourceStr](ts-types.md#resourcestr) | 否 |@Trace | 子标题右侧icon图标无障碍说明，用于为用户进一步说明当前组件。<br>默认值：“单指双击即可执行”。 | 242| defaultFocus | boolean | 否 | @Trace |子标题右侧按钮是否为默认焦点。<br/>true：子标题右侧按钮是默认焦点。<br/>false：子标题右侧按钮不是默认焦点。<br />默认值：false | 243 244### constructor 245 246constructor(options: SubHeaderV2OperationItemOptions) 247 248下拉选项信息SubHeaderV2OperationItem的构造函数。 249 250**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 251 252**系统能力：** SystemCapability.ArkUI.ArkUI.Full 253 254**参数：** 255 256| 参数名 | 类型 | 必填 | 说明 | 257| --------- | -------------------- | ------ | ------------------ | 258| options | SubHeaderV2OperationItemOptions| 是 | 下拉选项信息。 | 259 260## SubHeaderV2OperationItemAction 261 262type SubHeaderV2OperationItemAction = () => void 263 264操作区的设置项的回调事件类型。 265 266**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 267 268**系统能力：** SystemCapability.ArkUI.ArkUI.Full 269 270## SubHeaderV2OperationItemOptions 271 272用于构建SubHeaderV2OperationItem对象。 273 274**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 275 276**系统能力：** SystemCapability.ArkUI.ArkUI.Full 277 278| 名称 | 类型 | 必填 | 说明 | 279|--------------------------|---------------------------------------------| -------- |-----------------------------------------------------| 280| content | [SubHeaderV2OperationItemType](#subheaderv2operationitemtype) | 是 | 文本内容。 | 281| action | [SubHeaderV2OperationItemAction](#subheaderv2operationitemaction) | 否 | 选项操作事件。默认值() => void。 | 282| accessibilityText | [ResourceStr](ts-types.md#resourcestr) | 否 | 子标题右侧icon图标无障碍描述。<br />默认值：undefined | 283| accessibilityLevel | [string](ts-types.md#resourcestr) | 否 | 子标题右侧icon图标无障碍重要性。<br>默认值: “yes”。 | 284| accessibilityDescription | [ResourceStr](ts-types.md#resourcestr) | 否 | 子标题右侧icon图标无障碍说明，用于为用户进一步说明当前组件。<br>默认值：“单指双击即可执行”。 | 285| defaultFocus | boolean | 否 | 子标题右侧按钮是否为默认焦点。<br/>true：子标题右侧按钮是默认焦点。<br/>false：子标题右侧按钮不是默认焦点。<br />默认值：false | 286 287## SubHeaderV2TitleBuilder 288 289type SubHeaderV2TitleBuilder= () => void 290 291自定义标题区内容的回调事件类型。 292 293**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 294 295**系统能力：** SystemCapability.ArkUI.ArkUI.Full 296 297## 事件 298不支持[通用事件](ts-component-general-events.md)。 299 300## 示例 301### 示例1（效率型子标题） 302该示例主要演示子标题左侧为icon、secondaryTitle，右侧operationType为按钮类型。 303 304```ts 305import { 306 SubHeaderV2OperationType, 307 SubHeaderV2, 308 SubHeaderV2Title, 309 SubHeaderV2OperationItem, 310 Prompt, 311 TextModifier 312} from '@kit.ArkUI'; 313 314@Entry 315@ComponentV2 316struct SubHeaderExample { 317 @Local selectText: string = "TTTTT" 318 @Local selectIndex: number = 2 319 @Local flag: boolean = true; 320 @Local index: number = 1; 321 @Local primaryTitle: ResourceStr = '一级标题'; 322 @Local secondaryTitle: ResourceStr = '二级标题'; 323 @Local subHeaderIcon: Resource = $r('sys.media.ohos_ic_public_email'); 324 @Local title: SubHeaderV2Title = new SubHeaderV2Title({ primaryTitle: '一级标题' }); 325 @Local primaryModifier: TextModifier = new TextModifier().fontColor(Color.Red); 326 @Local secondaryModifier: TextModifier = new TextModifier().fontColor(Color.Red); 327 @Local subHeaderOperationType: SubHeaderV2OperationType = SubHeaderV2OperationType.BUTTON; 328 @Local operationItems: SubHeaderV2OperationItem[] = []; 329 330 aboutToAppear(): void { 331 this.title = new SubHeaderV2Title({ 332 primaryTitle: this.primaryTitle, 333 secondaryTitle: this.secondaryTitle, 334 }); 335 this.operationItems = [new SubHeaderV2OperationItem({ 336 content: '操作', 337 action: () => { 338 Prompt.showToast({ message: 'demo2' }) 339 } 340 })] 341 } 342 343 build() { 344 Column() { 345 Column() { 346 SubHeaderV2({ 347 icon: this.subHeaderIcon, 348 title: this.title, 349 operationType: this.subHeaderOperationType, 350 operationItems: this.operationItems 351 }); 352 } 353 } 354 } 355} 356``` 357 358 359 360### 示例2（双行文本内容型子标题） 361该示例主要演示子标题左侧为primaryTitle、secondaryTitle，右侧operationType类型为TEXT_ARROW。 362 363```ts 364import { 365 SubHeaderV2OperationType, 366 SubHeaderV2, 367 SubHeaderV2Title, 368 SubHeaderV2OperationItem, 369 Prompt, 370 TextModifier 371} from '@kit.ArkUI'; 372 373@Entry 374@ComponentV2 375struct SubHeaderExample { 376 @Local title: SubHeaderV2Title = new SubHeaderV2Title({ primaryTitle: '一级标题', secondaryTitle: '二级标题' }); 377 @Local primaryModifier: TextModifier = new TextModifier().fontColor(Color.Red); 378 @Local secondaryModifier: TextModifier = new TextModifier().fontColor(Color.Red); 379 @Local subHeaderOperationType: SubHeaderV2OperationType = SubHeaderV2OperationType.TEXT_ARROW; 380 @Local operationItems: SubHeaderV2OperationItem[] = []; 381 382 aboutToAppear(): void { 383 this.title = new SubHeaderV2Title({ 384 primaryTitle: '一级标题', 385 secondaryTitle: '二级标题' 386 }); 387 this.operationItems = [new SubHeaderV2OperationItem({ 388 content: '更多', 389 action: () => { 390 Prompt.showToast({ message: 'demo2' }) 391 } 392 })] 393 } 394 395 build() { 396 Column() { 397 Column() { 398 SubHeaderV2({ 399 title: this.title, 400 operationType: this.subHeaderOperationType, 401 operationItems: this.operationItems 402 }); 403 } 404 } 405 } 406} 407``` 408 409 410 411### 示例3（spinner型内容型子标题） 412该示例主要演示子标题左侧为select，右侧operationType类型为ICON_GROUP。 413 414```ts 415import { 416 SubHeaderV2, 417 SubHeaderV2OperationType, 418 SubHeaderV2OperationItem, 419 SubHeaderV2Title, 420 SubHeaderV2Select, 421 Prompt 422} from '@kit.ArkUI'; 423 424@Entry 425@ComponentV2 426struct SubHeaderExample { 427 @Local selectedValue: string = 'aaa'; 428 @Local selectedIndex: number = 0; 429 @Local title: SubHeaderV2Title = new SubHeaderV2Title({ primaryTitle: '一级标题', secondaryTitle: '二级标题' }); 430 @Local operationItems: SubHeaderV2OperationItem[] = []; 431 @Local select: SubHeaderV2Select = 432 new SubHeaderV2Select({ options: [{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }] }); 433 434 aboutToAppear(): void { 435 436 this.title = new SubHeaderV2Title({ 437 primaryTitle: '一级标题', 438 secondaryTitle: '二级标题' 439 }); 440 441 this.selectedValue = 'selectDemo'; 442 this.select = new SubHeaderV2Select({ 443 options: [{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }], 444 selectedContent: this.selectedValue, 445 selectedIndex: this.selectedIndex, 446 onSelect: (index: number, value?: string) => { 447 Prompt.showToast({ message: 'selectdemo' }) 448 } 449 }) 450 451 this.operationItems = [ 452 new SubHeaderV2OperationItem({ 453 content: $r('sys.media.ohos_ic_public_email'), 454 action: () => { 455 Prompt.showToast({ message: 'demo' }) 456 } 457 }), 458 new SubHeaderV2OperationItem({ 459 content: $r('sys.media.ohos_ic_public_email'), 460 action: () => { 461 Prompt.showToast({ message: 'demo' }) 462 } 463 }), 464 new SubHeaderV2OperationItem({ 465 content: $r('sys.media.ohos_ic_public_email'), 466 action: () => { 467 Prompt.showToast({ message: 'demo' }) 468 } 469 })] 470 } 471 472 build() { 473 Column() { 474 Column() { 475 SubHeaderV2({ 476 select: this.select, 477 operationType: SubHeaderV2OperationType.ICON_GROUP, 478 operationItems: this.operationItems 479 }) 480 } 481 } 482 } 483} 484``` 485 486 487 488### 示例4（设置左侧symbol图标） 489该示例主要演示子标题左侧icon设置symbol图标。 490 491```ts 492import { 493 SubHeaderV2, 494 SubHeaderV2OperationType, 495 SubHeaderV2OperationItem, 496 SubHeaderV2Title, 497 Prompt, 498 SymbolGlyphModifier 499} from '@kit.ArkUI'; 500 501@Entry 502@ComponentV2 503struct SubHeaderExample { 504 @Local icon: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_wifi')); 505 506 aboutToAppear(): void { 507 this.icon = new SymbolGlyphModifier($r('sys.symbol.ohos_wifi')).fontSize(24); 508 this.icon.effectStrategy(SymbolEffectStrategy.HIERARCHICAL) 509 } 510 511 build() { 512 Column() { 513 SubHeaderV2({ 514 icon: this.icon, 515 title: new SubHeaderV2Title({ secondaryTitle: '标题' }), 516 operationType: SubHeaderV2OperationType.BUTTON, 517 operationItems: [new SubHeaderV2OperationItem({ 518 content: '操作', 519 action: () => { 520 Prompt.showToast({ message: 'demo' }) 521 } 522 })] 523 }) 524 } 525 } 526} 527``` 528 529 530 531### 示例5（设置右侧symbol图标） 532该示例主要演示子标题operationType设置为OperationType.ICON_GROUP，operationItem的value设置为symbol图标。 533 534```ts 535import { 536 SubHeaderV2, 537 SubHeaderV2OperationType, 538 SubHeaderV2OperationItem, 539 SubHeaderV2Title, 540 SubHeaderV2Select, 541 Prompt, 542 SymbolGlyphModifier 543} from '@kit.ArkUI'; 544 545@Entry 546@ComponentV2 547struct SubHeaderExample { 548 @Local icon: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_wifi')); 549 @Local selectedValue: string = 'aaa'; 550 @Local selectedIndex: number = 2; 551 @Local title: SubHeaderV2Title = new SubHeaderV2Title({ primaryTitle: '一级标题', secondaryTitle: '二级标题' }); 552 @Local operationItem: SubHeaderV2OperationItem[] = []; 553 @Local select: SubHeaderV2Select = 554 new SubHeaderV2Select({ options: [{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }] }); 555 556 aboutToAppear(): void { 557 this.icon = new SymbolGlyphModifier($r('sys.symbol.ohos_wifi')); 558 this.icon.effectStrategy(SymbolEffectStrategy.HIERARCHICAL); 559 560 this.selectedValue = 'selectDemo'; 561 this.selectedIndex = 2; 562 this.title = new SubHeaderV2Title({ 563 primaryTitle: '一级标题', 564 secondaryTitle: '二级标题' 565 }); 566 this.select = new SubHeaderV2Select({ 567 options: [{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }], 568 selectedContent: this.selectedValue, 569 selectedIndex: this.selectedIndex, 570 onSelect: (index: number, value?: string) => { 571 Prompt.showToast({ message: 'demo' }) 572 } 573 }) 574 575 this.operationItem = [ 576 new SubHeaderV2OperationItem({ 577 content: new SymbolGlyphModifier($r('sys.symbol.ohos_lungs')).fontWeight(FontWeight.Lighter), 578 action: () => { 579 Prompt.showToast({ message: 'demo1' }) 580 } 581 }), 582 new SubHeaderV2OperationItem({ 583 content: new SymbolGlyphModifier($r('sys.symbol.ohos_lungs')) 584 .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR) 585 .fontColor([Color.Blue, Color.Grey, Color.Green]) 586 , 587 action: () => { 588 Prompt.showToast({ message: 'demo2' }) 589 } 590 }), 591 new SubHeaderV2OperationItem({ 592 content: new SymbolGlyphModifier($r('sys.symbol.ohos_lungs')) 593 .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_OPACITY) 594 .fontColor([Color.Blue, Color.Grey, Color.Green]) 595 , 596 action: () => { 597 Prompt.showToast({ message: 'demo3' }) 598 } 599 })] 600 } 601 602 build() { 603 Column() { 604 SubHeaderV2({ 605 select: this.select, 606 operationType: SubHeaderV2OperationType.ICON_GROUP, 607 operationItems: this.operationItem 608 }) 609 } 610 } 611} 612``` 613 614 615 616### 示例6（自定义标题内容） 617 该示例主要演示SubHeader设置titleBuilder自定义标题内容的效果。 618 619```ts 620import { 621 SubHeaderV2, 622 SubHeaderV2OperationType, 623 SubHeaderV2OperationItem, 624 SubHeaderV2Title, 625 Prompt 626} from '@kit.ArkUI'; 627 628@Entry 629@ComponentV2 630struct SubHeaderExample { 631 @Local title: SubHeaderV2Title = new SubHeaderV2Title({ primaryTitle: '一级标题' }); 632 @Local operationItem: SubHeaderV2OperationItem[] = []; 633 634 aboutToAppear(): void { 635 this.title = new SubHeaderV2Title({ 636 primaryTitle: '一级标题', 637 secondaryTitle: '二级标题' 638 }); 639 this.operationItem = [new SubHeaderV2OperationItem({ 640 content: '更多信息', 641 action: () => { 642 Prompt.showToast({ message: 'demo' }) 643 } 644 })] 645 } 646 647 @Builder 648 TitleBuilder(): void { 649 Text('自定义标题') 650 .fontSize(24) 651 .fontColor(Color.Blue) 652 .fontWeight(FontWeight.Bold) 653 } 654 655 build() { 656 Column() { 657 SubHeaderV2({ 658 titleBuilder: () => { 659 this.TitleBuilder(); 660 }, 661 title: this.title, 662 663 operationType: SubHeaderV2OperationType.TEXT_ARROW, 664 operationItems: this.operationItem 665 }) 666 } 667 } 668} 669``` 670 671 672 673### 示例7（自定义标题样式） 674该示例主要演示SubHeader设置标题和副标题字体样式。 675 676```ts 677import { 678 SubHeaderV2, 679 SubHeaderV2OperationType, 680 SubHeaderV2OperationItem, 681 SubHeaderV2Title, 682 Prompt, 683 TextModifier 684} from '@kit.ArkUI'; 685 686@Entry 687@ComponentV2 688struct SubHeaderExample { 689 @Local primaryModifier: TextModifier = new TextModifier().fontColor(Color.Blue); 690 @Local secondaryModifier: TextModifier = new TextModifier().fontColor(Color.Blue); 691 @Local title: SubHeaderV2Title = new SubHeaderV2Title({ primaryTitle: '一级标题' }); 692 @Local operationItems4: SubHeaderV2OperationItem[] = []; 693 694 aboutToAppear(): void { 695 this.title = new SubHeaderV2Title({ 696 primaryTitle: '一级标题', 697 primaryTitleModifier: this.primaryModifier, 698 secondaryTitle: '二级标题', 699 secondaryTitleModifier: this.secondaryModifier 700 }); 701 this.operationItems4 = [new SubHeaderV2OperationItem({ 702 content: '更多信息', 703 action: () => { 704 Prompt.showToast({ message: 'demo' }) 705 } 706 })] 707 } 708 709 build() { 710 Column() { 711 SubHeaderV2({ 712 title: this.title, 713 operationType: SubHeaderV2OperationType.TEXT_ARROW, 714 operationItems: this.operationItems4 715 }) 716 } 717 } 718} 719``` 720 721 722 723 724### 示例8（右侧按钮自定义播报） 725该示例通过设置subheader的右侧按钮属性accessibilityText、accessibilityDescription、accessibilityLevel自定义屏幕朗读播报文本。 726```ts 727import { 728 SubHeaderV2OperationType, 729 SubHeaderV2, 730 SubHeaderV2Title, 731 SubHeaderV2OperationItem, 732 SubHeaderV2IconType, 733 SubHeaderV2Select, 734 Prompt 735} from '@kit.ArkUI'; 736 737@Entry 738@ComponentV2 739struct SubHeaderExample { 740 @Local index: number = 1; 741 @Local primaryTitle: ResourceStr = '一级标题'; 742 @Local secondaryTitle: ResourceStr = '二级标题'; 743 @Local subHeaderIcon: SubHeaderV2IconType | undefined = $r('sys.media.ohos_ic_public_email'); 744 @Local title: SubHeaderV2Title = new SubHeaderV2Title({ primaryTitle: '一级标题' }); 745 @Local title2: SubHeaderV2Title = new SubHeaderV2Title({ primaryTitle: '一级标题', secondaryTitle: '二级标题' }); 746 @Local subHeaderOperationType: SubHeaderV2OperationType = SubHeaderV2OperationType.BUTTON; 747 @Local subHeaderOperationType2: SubHeaderV2OperationType = SubHeaderV2OperationType.TEXT_ARROW; 748 @Local subHeaderOperationType3: SubHeaderV2OperationType = SubHeaderV2OperationType.ICON_GROUP; 749 @Local operationItems: SubHeaderV2OperationItem[] = []; 750 @Local selectedValue: string | undefined = 'selectDemo'; 751 @Local selectedIndex: number = 0; 752 @Local select: SubHeaderV2Select = 753 new SubHeaderV2Select({ options: [{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }] }); 754 755 aboutToAppear(): void { 756 this.select = new SubHeaderV2Select({ options: [] }); 757 this.title = new SubHeaderV2Title({ 758 primaryTitle: this.primaryTitle, 759 secondaryTitle: this.secondaryTitle, 760 }); 761 this.operationItems = [new SubHeaderV2OperationItem({ 762 content: '操作', 763 action: () => { 764 Prompt.showToast({ message: 'demo2' }) 765 } 766 })] 767 } 768 769 build() { 770 Column() { 771 Column() { 772 SubHeaderV2({ 773 icon: this.subHeaderIcon, 774 title: this.title, 775 select: this.select, 776 operationType: this.subHeaderOperationType, 777 operationItems: this.operationItems 778 }); 779 Divider().color('grey').width('100%').height('2vp') 780 SubHeaderV2({ 781 title: this.title2, 782 select: this.select, 783 operationType: this.subHeaderOperationType2, 784 operationItems: this.operationItems 785 }); 786 Divider().color('grey').width('100%').height('2vp') 787 SubHeaderV2({ 788 select: new SubHeaderV2Select({ 789 options: [{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }], 790 selectedIndex: this.selectedIndex, 791 selectedContent: this.selectedValue, 792 onSelect: (index: number, value?: string) => { 793 this.selectedIndex = index; 794 this.selectedValue = value; 795 Prompt.showToast({ message: this.selectedValue }) 796 } 797 }), 798 operationType: this.subHeaderOperationType3, 799 operationItems: [new SubHeaderV2OperationItem({ 800 content: $r('sys.media.ohos_ic_public_email'), 801 accessibilityText: '图标1', 802 accessibilityLevel: 'yes', 803 }), new SubHeaderV2OperationItem({ 804 content: $r('sys.media.ohos_ic_public_email'), 805 accessibilityText: '图标2', 806 accessibilityLevel: 'no', 807 }), new SubHeaderV2OperationItem({ 808 content: $r('sys.media.ohos_ic_public_email'), 809 accessibilityText: '图标3', 810 accessibilityDescription: '点击操作图标3', 811 })] 812 }); 813 } 814 Divider().color('grey').width('100%').height('2vp') 815 } 816 } 817} 818``` 819 820 821### 示例9（右侧按钮自定义播报） 822该示例通过设置subheader的右侧按钮属性accessibilityText、accessibilityDescription、accessibilityLevel自定义屏幕朗读播报文本。 823```ts 824import { 825 SubHeaderV2OperationType, 826 SubHeaderV2, 827 SubHeaderV2Title, 828 SubHeaderV2OperationItem, 829 Prompt, 830 TextModifier 831} from '@kit.ArkUI'; 832 833@Entry 834@ComponentV2 835struct SubHeaderExample { 836 @Local selectText: string = "TTTTT" 837 @Local selectIndex: number = 2 838 @Local flag: boolean = true; 839 @Local index: number = 1; 840 @Local primaryTitle: ResourceStr = '一级标题'; 841 @Local secondaryTitle: ResourceStr = '二级标题'; 842 @Local subHeaderIcon: Resource = $r('app.media.app_icon'); 843 @Local title: SubHeaderV2Title = new SubHeaderV2Title({ primaryTitle: '一级标题' }); 844 @Local primaryModifier: TextModifier = new TextModifier().fontColor(Color.Red); 845 @Local secondaryModifier: TextModifier = new TextModifier().fontColor(Color.Red); 846 @Local subHeaderOperationType: SubHeaderV2OperationType = SubHeaderV2OperationType.BUTTON; 847 @Local operationItems: SubHeaderV2OperationItem[] = []; 848 849 aboutToAppear(): void { 850 this.title = new SubHeaderV2Title({ 851 secondaryTitle: this.secondaryTitle, 852 }); 853 this.operationItems = [new SubHeaderV2OperationItem({ 854 content: '操作', 855 defaultFocus: true, 856 action: () => { 857 Prompt.showToast({ message: 'demo2' }) 858 } 859 })] 860 } 861 862 build() { 863 Column() { 864 Column() { 865 SubHeaderV2({ 866 icon: this.subHeaderIcon, 867 title: this.title, 868 operationType: this.subHeaderOperationType, 869 operationItems: this.operationItems 870 }); 871 } 872 } 873 } 874} 875``` 876
