1# Chip 2 3操作块，用于搜索框历史记录或者邮件发送列表等场景。 4 5> **说明：** 6> 7> 该组件从API Version 11开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## 导入模块 10 11```ts 12import { Chip, ChipOptions, ChipSize } from '@kit.ArkUI'; 13``` 14 15## 子组件 16 17无 18 19## Chip 20 21Chip({options:ChipOptions}) 22 23**装饰器类型：**@Builder 24 25**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 26 27**系统能力：** SystemCapability.ArkUI.ArkUI.Full 28 29**参数**： 30 31| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 32| ------- | --------------------------- | ---- | ---------- | -------------------- | 33| options | [ChipOptions](#chipoptions) | 是 | @Builder | 定义chip组件的参数。 | 34 35## ChipOptions 36 37ChipOptions定义chip的样式及具体式样参数。 38 39**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 40 41**系统能力：** SystemCapability.ArkUI.ArkUI.Full 42 43| 名称 | 类型 | 必填 | 说明 | 44| --------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 45| size | [ChipSize](#chipsize) \| [SizeOptions](ts-types.md#sizeoptions) | 否 | 操作块尺寸。<br/>默认值：ChipSize：ChipSize.NORMAL，<br/> SizeOptions类型参数不支持百分比设置。 | 46| enabled | boolean | 否 | 操作块是否可选中。<br>默认值：true | 47| activated<sup>12+</sup> | boolean | 否 | 操作块是否为激活态。<br>默认值：false | 48| prefixIcon | [PrefixIconOptions](#prefixiconoptions) | 否 | 前缀图标属性。 | 49| prefixSymbol<sup>12+</sup> | [ChipSymbolGlyphOptions](#chipsymbolglyphoptions12) | 否 | 前缀图标属性，symbol类型。 | 50| label | [LabelOptions](#labeloptions) | 是 | 文本属性。 | 51| suffixIcon | [SuffixIconOptions](#suffixiconoptions) | 否 | 后缀图标属性。 | 52| suffixSymbol<sup>12+</sup> | [ChipSymbolGlyphOptions](#chipsymbolglyphoptions12) | 否 | 后缀图标属性，symbol类型。 | 53| suffixSymbolOptions<sup>14+</sup> | [ChipSuffixSymbolGlyphOptions](#chipsuffixsymbolglyphoptions14) | 否 | symbol类型后缀图标属性的无障碍朗读功能属性。| 54| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 操作块背景颜色。<br/>默认值：$r('sys.color.ohos_id_color_button_normal') | 55| activatedBackgroundColor<sup>12+</sup> | [ResourceColor](ts-types.md#resourcecolor) | 否 | 操作块激活时的背景颜色。<br/>默认值：$r('sys.color.ohos_id_color_emphasize')。 | 56| borderRadius | [Dimension](ts-types.md#dimension10) | 否 | 操作块背景圆角半径大小，不支持百分比。<br/>默认值：$r('sys.float.ohos_id_corner_radius_button') | 57| allowClose | boolean | 否 | 删除图标是否显示。<br/>默认值：true | 58| onClose | ()=>void | 否 | 默认删除图标点击事件。 | 59| onClicked<sup>12+</sup> | [VoidCallback](ts-types.md#voidcallback12) | 否 | 操作块点击事件。 | 60| direction<sup>12+</sup> | [Direction](ts-appendix-enums.md#direction) | 否 | 布局方向。<br/>默认值：Direction.Auto | 61| closeOptions<sup>14+</sup> | [CloseOptions](#closeoptions14) | 否 | 默认删除图标的无障碍朗读功能属性。 | 62| accessibilityDescription<sup>14+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | Chip组件无障碍描述。| 63| accessibilityLevel<sup>14+</sup> | string | 否 | Chip组件无障碍重要性。<br>默认值："auto"。 | 64| accessibilitySelectedType<sup>14+</sup> | [AccessibilitySelectedType](#accessibilityselectedtype14) | 否 | Chip组件选中态类型。| 65 66> **说明：** 67> 68> 1.suffixSymbol有传入参数时，suffixIcon和allowClose不生效；suffixSymbol没有传入参数、suffixIcon有传入参数时，allowClose不生效；suffixSymbol和suffixIcon都没有传入参数时，allowClose决定是否显示删除图标。 69> 70> 2.backgroundColor和activatedBackgroundColor赋值undefined时，显示默认背景颜色，赋值非法值时，背景色透明。 71> 72> 3.prefixSymbol/suffixSymbol的fontColor默认值，normalFontColor: `[$r('sys.color.ohos_id_color_primary')]`、activatedFontColor: `[$r('sys.color.ohos_id_color_text_primary_contrary')]`。fontColor默认值为16。 73> 74> 4.prefixIcon的fillColor默认值：`$r('sys.color.ohos_id_color_secondary')`，suffixIcon的fillColor默认值：`$r('sys.color.ohos_id_color_primary')`。fillColor对颜色的解析与Image组件保持一致。 75> 76> 5.prefixIcon的activatedFillColor默认值：`$r('sys.color.ohos_id_color_text_primary_contrary')`，suffixIcon的activatedFillColor默认值：`$r('sys.color.ohos_id_color_text_primary_contrary')`。activatedFillColor对颜色的解析与Image组件保持一致。 77 78## ChipSize 79 80ChipSize是chip可指定的尺寸类型，如普通型Chip。 81 82**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 83 84**系统能力：** SystemCapability.ArkUI.ArkUI.Full 85 86| 名称 | 值 | 说明 | 87| ------ | -------- | ------------------ | 88| NORMAL | "NORMAL" | normal尺寸操作块。 | 89| SMALL | "SMALL" | small尺寸操作块。 | 90 91## AccessibilitySelectedType<sup>14+</sup> 92 93AccessibilitySelectedType是Chip可指定的选中态类型，如默认类型为AccessibilitySelectedType.CLICKED。 94 95**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 96 97**系统能力：** SystemCapability.ArkUI.ArkUI.Full 98 99| 名称 | 值 | 描述 | 100| ---- | -- | ---- | 101| CLICKED | 0 | Chip组件选中态默认类型。| 102| CHECKED | 1 | Chip组件选中态复选类型。| 103| SELECTED | 2 | Chip组件选中态单选类型。| 104 105## IconCommonOptions 106 107IconCommonOptions定义图标的共通属性。 108 109**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 110 111**系统能力：** SystemCapability.ArkUI.ArkUI.Full 112 113| 名称 | 类型 | 必填 | 说明 | 114| --------- | ------------------------------------------ | ---- | ------------------------------------------------------------ | 115| src | [ResourceStr](ts-types.md#resourcestr) | 是 | 图标图片或图片地址引用。 | 116| size | [SizeOptions](ts-types.md#sizeoptions) | 否 | 图标大小，不支持百分比。<br/>默认值：{width: 16,height: 16} | 117| fillColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 图标填充颜色。 | 118| activatedFillColor<sup>12+</sup> | [ResourceColor](ts-types.md#resourcecolor) | 否 | 操作块激活时图标填充颜色。 | 119 120> **说明：** 121> 122> 仅在图片格式为svg时，fillColor和activatedFillColor生效。 123> 124 125## PrefixIconOptions 126 127PrefixIconOptions定义前缀图标的属性。 128 129继承于[IconCommonOptions](#iconcommonoptions)。 130 131**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 132 133**系统能力：** SystemCapability.ArkUI.ArkUI.Full 134 135## SuffixIconOptions 136 137SuffixIconOptions定义后缀图标的属性。 138 139继承于[IconCommonOptions](#iconcommonoptions)。 140 141**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 142 143**系统能力：** SystemCapability.ArkUI.ArkUI.Full 144 145| 名称 | 类型 | 必填 | 说明 | 146| ------ | ---------- | ---- | ------------------ | 147| action | () => void | 否 | 后缀图标设定事件。 | 148| accessibilityText<sup>14+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 后缀图标无障碍文本属性。| 149| accessibilityDescription<sup>14+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 后缀图标无障碍描述。| 150| accessibilityLevel<sup>14+</sup> | string | 否 | 后缀图标无障碍重要性。<br>默认值："auto"。| 151 152## AccessibilityOptions<sup>14+</sup> 153 154后缀图标的无障碍朗读功能属性。 155 156**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 157 158**系统能力：** SystemCapability.ArkUI.ArkUI.Full 159 160| 名称 | 类型 | 必填 | 说明 | 161| ------ | ---------- | ---- | ------------------ | 162| accessibilityText | [ResourceStr](ts-types.md#resourcestr) | 否 | 无障碍文本属性。| 163| accessibilityDescription | [ResourceStr](ts-types.md#resourcestr) | 否 | 无障碍描述。| 164| accessibilityLevel | string | 否 | 无障碍重要性。<br>默认值："auto"。| 165 166## ChipSuffixSymbolGlyphOptions<sup>14+</sup> 167 168symbol类型后缀图标属性的无障碍朗读功能属性类型。 169 170**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 171 172**系统能力：** SystemCapability.ArkUI.ArkUI.Full 173 174| 名称 | 类型 | 必填 | 说明 | 175| ---- | ---- | --- | ---- | 176| action | [VoidCallback](ts-types.md#voidcallback12) | 否 | 后缀图标响应事件。| 177| normalAccessibility | [AccessibilityOptions](#accessibilityoptions14) | 否 | 非激活态无障碍朗读功能属性。| 178| activatedAccessibility | [AccessibilityOptions](#accessibilityoptions14) | 否 | 激活态无障碍朗读功能属性。| 179 180## ChipSymbolGlyphOptions<sup>12+</sup> 181 182ChipSymbolGlyphOptions定义前缀图标和后缀图标的属性。 183 184**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 185 186**系统能力：** SystemCapability.ArkUI.ArkUI.Full 187 188| 名称 | 类型 | 必填 | 说明 | 189| ------ | ---------- | ---- | ------------------ | 190| normal | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | 否 | 图标设定事件。 | 191| activated | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | 否 | 激活时图标设定事件。 | 192 193> **说明：** 194> 195> 不支持通过symbolEffect修改动效类型和effectStrategy设置动效。 196> 197 198## LabelOptions 199 200LabelOptions定义文本的属性。 201 202**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 203 204**系统能力：** SystemCapability.ArkUI.ArkUI.Full 205 206| 名称 | 类型 | 必填 | 说明 | 207| ----------- | ------------------------------------------ | ---- | ------------------------------------------------------------ | 208| text | string | 是 | 文本文字内容。 | 209| fontSize | [Dimension](ts-types.md#dimension10) | 否 | 文字字号，不支持百分比。<br/>默认值：$r('sys.float.ohos_id_text_size_button2') | 210| fontColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 文字颜色。<br/>默认值：$r('sys.color.ohos_id_color_text_primary') | 211| activatedFontColor<sup>12+</sup> | [ResourceColor](ts-types.md#resourcecolor) | 否 | 操作块激活时的文字颜色。<br/>默认值：$r('sys.color.ohos_id_color_text_primary_contrary') | 212| fontFamily | string | 否 | 文字字体。<br/>默认值："HarmonyOS Sans" | 213| labelMargin | [LabelMarginOptions](#labelmarginoptions) | 否 | 文本与左右侧图标之间间距。 | 214| localizedLabelMargin<sup>12+</sup> | [LocalizedLabelMarginOptions](#localizedlabelmarginoptions12) | 否 | 本地化文本与左右侧图标之间间距。<br/>默认值：{<br/>start: LengthMetrics.vp(6), end: LengthMetrics.vp(6)<br/>} | 215 216## CloseOptions<sup>14+</sup> 217 218默认关闭图标的无障碍朗读功能属性，accessibilityText默认为"删除"。 219 220继承于[AccessibilityOptions](#accessibilityoptions14)。 221 222**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 223 224**系统能力：** SystemCapability.ArkUI.ArkUI.Full 225 226## LabelMarginOptions 227 228LabelMarginOptions定义文本与左右侧图标之间间距。 229 230**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 231 232**系统能力：** SystemCapability.ArkUI.ArkUI.Full 233 234| 名称 | 类型 | 必填 | 说明 | 235| ----- | ------------------------------------ | ---- | -------------------------------------- | 236| left | [Dimension](ts-types.md#dimension10) | 否 | 文本与左侧图标之间间距，不支持百分比。 | 237| right | [Dimension](ts-types.md#dimension10) | 否 | 文本与右侧图标之间间距，不支持百分比。 | 238 239## LocalizedLabelMarginOptions<sup>12+</sup> 240 241LocalizedLabelMarginOptions定义本地化文本与左右侧图标之间间距。 242 243**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 244 245**系统能力：** SystemCapability.ArkUI.ArkUI.Full 246 247| 名称 | 类型 | 必填 | 说明 | 248| ----- | ------------------------------------------------------------ | ---- | -------------------------------------- | 249| start | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | 文本与左侧图标之间间距，不支持百分比。 | 250| end | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | 文本与右侧图标之间间距，不支持百分比。 | 251 252## 示例 253 254### 示例1 255 256自定义删除图标的操作块。 257 258```ts 259import { Chip, ChipSize } from '@kit.ArkUI'; 260 261@Entry 262@Component 263struct Index { 264 build() { 265 Column({ space: 10 }) { 266 Chip({ 267 prefixIcon: { 268 src: $r('app.media.chips'), 269 size: { width: 16, height: 16 }, 270 fillColor: Color.Red 271 }, 272 label: { 273 text: "操作块", 274 fontSize: 12, 275 fontColor: Color.Blue, 276 fontFamily: "HarmonyOS Sans", 277 labelMargin: { left: 20, right: 30 } 278 }, 279 suffixIcon: { 280 src: $r('app.media.close'), 281 size: { width: 16, height: 16 }, 282 fillColor: Color.Red 283 }, 284 size: ChipSize.NORMAL, 285 allowClose: false, 286 enabled: true, 287 backgroundColor: $r('sys.color.ohos_id_color_button_normal'), 288 borderRadius: $r('sys.float.ohos_id_corner_radius_button') 289 }) 290 } 291 } 292} 293``` 294 295 296 297 298### 示例2 299 300使用默认删除图标的操作块。 301 302```ts 303import { Chip, ChipSize } from '@kit.ArkUI'; 304 305@Entry 306@Component 307struct Index { 308 build() { 309 Column({ space: 10 }) { 310 Chip({ 311 prefixIcon: { 312 src: $r('app.media.chips'), 313 size: { width: 16, height: 16 }, 314 fillColor: Color.Blue 315 }, 316 label: { 317 text: "操作块", 318 fontSize: 12, 319 fontColor: Color.Blue, 320 fontFamily: "HarmonyOS Sans", 321 labelMargin: { left: 20, right: 30 } 322 }, 323 size: ChipSize.NORMAL, 324 allowClose: true, 325 enabled: true, 326 backgroundColor: $r('sys.color.ohos_id_color_button_normal'), 327 borderRadius: $r('sys.float.ohos_id_corner_radius_button') 328 }) 329 } 330 } 331} 332``` 333 334 335 336 337### 示例3 338 339不显示删除图标的操作块。 340 341```ts 342import { Chip, ChipSize } from '@kit.ArkUI'; 343 344@Entry 345@Component 346struct Index { 347 build() { 348 Column({ space: 10 }) { 349 Chip({ 350 prefixIcon: { 351 src: $r('app.media.chips'), 352 size: { width: 16, height: 16 }, 353 fillColor: Color.Blue 354 }, 355 label: { 356 text: "操作块", 357 fontSize: 12, 358 fontColor: Color.Blue, 359 fontFamily: "HarmonyOS Sans", 360 labelMargin: { left: 20, right: 30 } 361 }, 362 size: ChipSize.SMALL, 363 allowClose: false, 364 enabled: true, 365 backgroundColor: $r('sys.color.ohos_id_color_button_normal'), 366 borderRadius: $r('sys.float.ohos_id_corner_radius_button'), 367 onClose:()=>{ 368 console.log("chip on close") 369 } 370 }) 371 } 372 } 373} 374``` 375 376 377 378 379### 示例4 380 381激活态操作块。 382 383```ts 384import { Chip, ChipSize } from '@kit.ArkUI'; 385 386@Entry 387@Component 388struct Index { 389 @State isActivated: boolean = false 390 391 build() { 392 Column({ space: 10 }) { 393 Chip({ 394 prefixIcon: { 395 src: $r('app.media.chips'), 396 size: { width: 16, height: 16 }, 397 fillColor: Color.Blue, 398 activatedFillColor: $r('sys.color.ohos_id_color_text_primary_contrary') 399 }, 400 label: { 401 text: "操作块", 402 fontSize: 12, 403 fontColor: Color.Blue, 404 activatedFontColor: $r('sys.color.ohos_id_color_text_primary_contrary'), 405 fontFamily: "HarmonyOS Sans", 406 labelMargin: { left: 20, right: 30 } 407 }, 408 size: ChipSize.NORMAL, 409 allowClose: true, 410 enabled: true, 411 activated: this.isActivated, 412 backgroundColor: $r('sys.color.ohos_id_color_button_normal'), 413 activatedBackgroundColor: $r('sys.color.ohos_id_color_emphasize'), 414 borderRadius: $r('sys.float.ohos_id_corner_radius_button'), 415 onClose:()=>{ 416 console.log("chip on close") 417 }, 418 onClicked:()=>{ 419 console.log("chip on clicked") 420 } 421 }) 422 423 Button('改变激活状态').onClick(()=>{ 424 this.isActivated = !this.isActivated 425 }) 426 } 427 } 428} 429``` 430 431 432 433 434### 示例5 435 436Chip组件的前缀、后缀图标使用symbol类型资源展示。 437 438```ts 439import { Chip, ChipSize, SymbolGlyphModifier } from '@kit.ArkUI'; 440 441@Entry 442@Component 443struct Index { 444 @State isActivated: boolean = false 445 446 build() { 447 Column({ space: 10 }) { 448 Chip({ 449 prefixIcon: { 450 src: $r('app.media.chips'), 451 size: { width: 16, height: 16 }, 452 fillColor: Color.Blue, 453 activatedFillColor: $r('sys.color.ohos_id_color_text_primary_contrary') 454 }, 455 prefixSymbol: { 456 normal: new SymbolGlyphModifier($r('sys.symbol.ohos_star')).fontSize(16).fontColor([Color.Green]), 457 activated: new SymbolGlyphModifier($r('sys.symbol.ohos_star')).fontSize(16).fontColor([Color.Red]), 458 }, 459 label: { 460 text: "操作块", 461 fontSize: 12, 462 fontColor: Color.Blue, 463 activatedFontColor: $r('sys.color.ohos_id_color_text_primary_contrary'), 464 fontFamily: "HarmonyOS Sans", 465 labelMargin: { left: 20, right: 30 }, 466 }, 467 size: ChipSize.NORMAL, 468 allowClose: true, 469 enabled: true, 470 activated: this.isActivated, 471 backgroundColor: $r('sys.color.ohos_id_color_button_normal'), 472 activatedBackgroundColor: $r('sys.color.ohos_id_color_emphasize'), 473 borderRadius: $r('sys.float.ohos_id_corner_radius_button'), 474 onClose:()=>{ 475 console.log("chip on close") 476 }, 477 onClicked:()=>{ 478 console.log("chip on clicked") 479 } 480 }) 481 482 Button('改变激活状态').onClick(()=>{ 483 this.isActivated = !this.isActivated 484 }) 485 } 486 } 487} 488``` 489 490 491 492### 示例6 493 494Chip布局镜像化展示 495 496```ts 497 498import { Chip, ChipSize,LengthMetrics } from '@kit.ArkUI'; 499 500@Entry 501@Component 502struct ChipPage { 503 504 build() { 505 Column() { 506 Chip({ 507 direction: Direction.Rtl, 508 prefixIcon: { 509 src: $r('app.media.chips'), 510 size: { width: 16, height: 16 }, 511 fillColor: Color.Red, 512 }, 513 label: { 514 text: "操作块", 515 fontSize: 12, 516 fontColor: Color.Blue, 517 fontFamily: "HarmonyOS Sans", 518 localizedLabelMargin: { start: LengthMetrics.vp(20), end: LengthMetrics.vp(20) }, 519 }, 520 suffixIcon: { 521 src: $r('app.media.close'), 522 size: { width: 16, height: 16 }, 523 fillColor: Color.Red, 524 }, 525 size: ChipSize.NORMAL, 526 allowClose: false, 527 enabled: true, 528 backgroundColor: $r('sys.color.ohos_id_color_button_normal'), 529 borderRadius: $r('sys.float.ohos_id_corner_radius_button') 530 }) 531 }.justifyContent(FlexAlign.Center) 532 .width('100%') 533 .height('100%') 534 } 535} 536``` 537 538 539 540 541### 示例7 542 543该示例代码实现了Chip组件Image类型后缀图标的无障碍朗读功能。 544 545```ts 546 547import { Chip, SymbolGlyphModifier } from '@kit.ArkUI'; 548 549@Builder 550function DefaultFunction(): void { 551} 552 553@Component 554struct SectionGroup { 555 @Prop 556 @Require 557 title: ResourceStr; 558 @BuilderParam 559 @Require 560 content: () => void = DefaultFunction; 561 562 build() { 563 Column({ space: 4 }) { 564 Text(this.title) 565 .fontColor('#FF666666') 566 .fontSize(12) 567 Column({ space: 8 }) { 568 this.content() 569 } 570 } 571 .alignItems(HorizontalAlign.Start) 572 .width('100%') 573 } 574} 575 576@Component 577struct SectionItem { 578 @Prop 579 @Require 580 title: ResourceStr; 581 @BuilderParam 582 @Require 583 content: () => void = DefaultFunction; 584 585 build() { 586 Column({ space: 12 }) { 587 Text(this.title) 588 this.content() 589 } 590 .backgroundColor('#FFFFFFFF') 591 .borderRadius(12) 592 .padding(12) 593 .width('100%') 594 } 595} 596 597@Entry 598@Component 599struct ChipExample2 { 600 @State activated: boolean = false; 601 602 build() { 603 NavDestination() { 604 Scroll() { 605 SectionGroup({ title: '后缀图标播报' }) { 606 SectionItem({ title: '自定义播报' }) { 607 Chip({ 608 label: { text: '操作块' }, 609 suffixIcon: { 610 src: $r('sys.media.ohos_ic_public_cut'), 611 accessibilityText: '图标', 612 accessibilityDescription: '新手提醒', 613 action: () => { 614 this.getUIContext().getPromptAction().showToast({ 615 message: '后缀图标被点击！' 616 }); 617 } 618 }, 619 onClicked: () => { 620 this.getUIContext().getPromptAction().showToast({ 621 message: '操作块被点击！' 622 }); 623 } 624 }) 625 } 626 } 627 } 628 } 629 } 630} 631``` 632 633### 示例8 634 635该示例代码实现了Chip组件Symbol类型后缀图标的无障碍朗读功能。 636 637```ts 638 639import { Chip, SymbolGlyphModifier } from '@kit.ArkUI'; 640 641@Builder 642function DefaultFunction(): void { 643} 644 645@Component 646struct SectionGroup { 647 @Prop 648 @Require 649 title: ResourceStr; 650 @BuilderParam 651 @Require 652 content: () => void = DefaultFunction; 653 654 build() { 655 Column({ space: 4 }) { 656 Text(this.title) 657 .fontColor('#FF666666') 658 .fontSize(12) 659 Column({ space: 8 }) { 660 this.content() 661 } 662 } 663 .alignItems(HorizontalAlign.Start) 664 .width('100%') 665 } 666} 667 668@Component 669struct SectionItem { 670 @Prop 671 @Require 672 title: ResourceStr; 673 @BuilderParam 674 @Require 675 content: () => void = DefaultFunction; 676 677 build() { 678 Column({ space: 12 }) { 679 Text(this.title) 680 this.content() 681 } 682 .backgroundColor('#FFFFFFFF') 683 .borderRadius(12) 684 .padding(12) 685 .width('100%') 686 } 687} 688 689@Entry 690@Component 691struct ChipExample2 { 692 @State activated: boolean = false; 693 694 build() { 695 NavDestination() { 696 Scroll() { 697 SectionGroup({ title: '后缀Symbol播报' }) { 698 SectionItem({ title: 'activatedAccessibility' }) { 699 Chip({ 700 label: { text: '操作块' }, 701 activated: true, 702 suffixSymbol: { 703 activated: new SymbolGlyphModifier($r('sys.symbol.media_sound')) 704 .fontSize(72), 705 }, 706 suffixSymbolOptions: { 707 activatedAccessibility: { 708 accessibilityText: '音乐', 709 accessibilityDescription: '新手提醒' 710 }, 711 action: () => { 712 this.getUIContext().getPromptAction().showToast({ 713 message: '后缀Symbol被点击！' 714 }); 715 } 716 }, 717 onClicked: () => { 718 this.getUIContext().getPromptAction().showToast({ 719 message: '操作块被点击！' 720 }); 721 } 722 }) 723 } 724 SectionItem({ title: 'normalAccessibility' }) { 725 Chip({ 726 label: { text: '操作块' }, 727 suffixSymbol: { 728 normal: new SymbolGlyphModifier($r('sys.symbol.media_sound')) 729 .fontSize(72), 730 }, 731 suffixSymbolOptions: { 732 normalAccessibility: { 733 accessibilityText: '音乐', 734 accessibilityDescription: '新手提醒' 735 }, 736 action: () => { 737 this.getUIContext().getPromptAction().showToast({ 738 message: '后缀Symbol被点击！' 739 }); 740 } 741 }, 742 onClicked: () => { 743 this.getUIContext().getPromptAction().showToast({ 744 message: '操作块被点击！' 745 }); 746 } 747 }) 748 } 749 } 750 } 751 } 752 .padding({ 753 top: 8, 754 bottom: 8, 755 left: 16, 756 right: 16, 757 }) 758 } 759} 760```
