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