1# ChipGroup 2 3ChipGroup高级组件，提供操作块群组，用于对文件或者资源内容进行分类等场景。 4 5> **说明：** 6> 7> 该组件从API Version 12开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> 9> 该组件不支持在Wearable设备上使用。 10 11## 导入模块 12 13```typescript 14import { ChipSize, ChipGroup } from '@kit.ArkUI' 15``` 16 17## 子组件 18 19无 20 21## ChipGroup 22 23``` 24ChipGroup({ 25 items: ChipGroupItemOptions[], 26 itemStyle?: ChipItemStyle, 27 selectedIndexes?: Array<number>, 28 multiple?: boolean, 29 chipGroupSpace?: ChipGroupSpaceOptions, 30 chipGroupPadding?: ChipGroupPaddingOptions, 31 onChange?: (selectedIndexes: Array<number>) => void, 32 suffix?: Callback<void> 33}) 34``` 35 36**装饰器类型：**@Component 37 38**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 39 40**系统能力：** SystemCapability.ArkUI.ArkUI.Full 41 42| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 43| --------------- | ----------------------------------------------- | ---- | ------------------------------------------------------------ | ------------------------------------------------------------ | 44| items | [ChipGroupItemOptions[]](#chipgroupitemoptions) | 是 | @Require @Prop | 每个chip特定的属性，参考[ChipGroupItemOptions[]](#chipgroupitemoptions)类型。<br/>为undefined时，ChipGroup默认为空。 | 45| itemStyle | [ChipItemStyle](#chipitemstyle) | 否 | @Prop | chip的style属性，比如颜色，大小等，参考[ChipItemStyle](#chipitemstyle)类型。<br/>为undefined时，ChipGroup中的Chip式样为默认值。 | 46| selectedIndexes | Array<number> | 否 | @Prop | 被选中chip的索引。<br/>为undefined时，默认第一个Chip被选中。 | 47| multiple | boolean | 否 | @Prop | true：支持多个chip被选中；false：只能是单个chip被选中。<br/>默认值：false<br/>为undefined时，multiple走默认值。 | 48| chipGroupSpace | [ChipGroupSpaceOptions](#chipgroupspaceoptions) | 否 | @Prop | 左右内边距，和chip与chip之间的间距。参考[ChipGroupSpaceOptions](#chipgroupspaceoptions)类型。<br/>为undefined时，chipGroupSpace走默认值。 | 49| chipGroupPadding | [ChipGroupPaddingOptions](#chipgrouppaddingoptions) | 否 | @Prop | chipGroup的上下内边距，以便控制整体高度。参考[ChipGroupPaddingOptions](#chipgrouppaddingoptions)类型。<br/>为undefined时，chipGroupPadding走默认值。 | 50| onChange | Callback\<Array\<number>> | 否 | - | chip状态改变时候的回调方法。<br/>为undefined时，表示解绑事件。 | 51| suffix | ()=>void | 否 | @BuilderParam | 最右侧的builder，由使用者自定义，使用时候需引入[IconGroupSuffix](#icongroupsuffix)接口。<br/>默认值：不传入的情况，没有suffix。 | 52 53> **说明：** 54> 55> 1. 针对selectedIndexes和multiple接口，multiple等于false的时候，当没有传入selectedIndexes时候，默认是第一个chip被选中，当传入的selectedIndexes有一个以上的元素时候，默认第一个索引的chip被选中。 56> 57> 2. 针对suffix接口，使用时候需要引入IconGroupSuffix接口，不传入的情况，没有suffix。 58> 59> 3. 关于图标填充色（fillColor以及activedFillColor）的设置，跟随字体颜色（fontColor）保持一致。若想两者颜色不同，则需要在传入[ChipGroupSpaceOptions](#chipgroupspaceoptions)时，使用prefixSymbol。 60 61## ChipGroupItemOptions 62 63ChipGroupItemOptions定义每个chip的非共通属性。 64 65**系统能力：** SystemCapability.ArkUI.ArkUI.Full 66 67| 名称 | 类型 | 必填 | 说明 | 68| ---------- | ----------------------------- | ---- | ----------------------------------- | 69| prefixIcon | [IconOptions](#iconoptions) | 否 | 前缀Image图标属性。<br> **原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 70| prefixSymbol | [ChipSymbolGlyphOptions](ohos-arkui-advanced-Chip.md#chipsymbolglyphoptions12) | 否 | 前缀SymbolGlyph图标属性。<br> **原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 71| label | [LabelOptions](#labeloptions) | 是 | 文本属性。<br> **原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 72| suffixIcon<sup>(deprecated)</sup> | [IconOptions](#iconoptions) | 否 | 后缀Image图标属性。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。**说明：** 从API version 12开始支持，从API version 14开始废弃，建议使用suffixImageIcon替代。| 73| suffixSymbol | [ChipSymbolGlyphOptions](ohos-arkui-advanced-Chip.md#chipsymbolglyphoptions12) | 否 | 后缀SymbolGlyph图标属性。<br> **原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 74| allowClose | boolean | 否 | 删除图标是否显示。<br/>默认值：false。<br> **原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 75| suffixImageIcon<sup>14+</sup> | [SuffixImageIconOptions](#suffiximageiconoptions14) | 否 | 后缀Image图标属性。<br> **原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 | 76| suffixSymbolOptions<sup>14+</sup> | [ChipSuffixSymbolGlyphOptions](ohos-arkui-advanced-Chip.md#chipsuffixsymbolglyphoptions14) | 否 | 后缀Symbol图标属性。<br> **原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。| 77| closeOptions<sup>14+</sup> | [CloseOptions](ohos-arkui-advanced-Chip.md#closeoptions14) | 否 | 默认删除图标的无障碍朗读功能属性。 <br> **原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。| 78| accessibilityDescription<sup>14+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | ChipGroup中Chip项的无障碍描述。此描述用于向用户详细解释ChipGroup中Chip项，开发人员应为ChipGroup中Chip项的这一属性提供较为详尽的文本说明，以协助用户理解即将执行的操作及其可能产生的后果。特别是当这些后果无法仅从ChipGroup中Chip项的属性和无障碍文本中直接获知时。如果ChipGroup中Chip项同时具备文本属性和无障碍说明属性，当ChipGroup中Chip项被选中时，系统将首先播报ChipGroup中Chip项的文本属性，随后播报无障碍说明属性的内容。<br> **原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。| 79| accessibilityLevel<sup>14+</sup> | string | 否 | ChipGroup中Chip项无障碍重要性。用于控制ChipGroup中Chip项是否可被无障碍辅助服务所识别。<br>支持的值为:<br>"auto"：ChipGroup中Chip项会转换为“yes”。<br>"yes"：ChipGroup中Chip项可被无障碍辅助服务所识别。<br>"no"：ChipGroup中Chip项不可被无障碍辅助服务所识别。<br>"no-hide-descendants"：ChipGroup中Chip项及其所有子组件不可被无障碍辅助服务所识别。<br>默认值："auto"。<br> **原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。| 80 81 82>**说明：** 83> 84>suffixIcon有传入参数时，allowClose不生效，suffixIcon没有传入参数时，allowClose决定是否显示删除图标。 85 86## ChipItemStyle 87 88ChipItemStyle定义了chip的共通属性。 89 90**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 91 92**系统能力：** SystemCapability.ArkUI.ArkUI.Full 93 94| 名称 | 类型 | 必填 | 说明 | 95| ----------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 96| size | [ChipSize](ohos-arkui-advanced-Chip.md#chipsize) \| [SizeOptions](ts-types.md#sizeoptions) | 否 | chip尺寸，使用时需要从chip组件引入ChipSize类型。<br/>默认值：ChipSize：ChipSize.NORMAL。<br/> 为undefined时，ChipSize走默认值。 | 97| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | chip背景颜色。<br/>默认值：$r('sys.color.ohos_id_color_button_normal')。<br/>为undefined时，backgroundColor走默认值。 | 98| fontColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | chip文字颜色。<br/>默认值：$r('sys.color.ohos_id_color_text_primary')。<br/>为undefined时，fontColor走默认值。 | 99| selectedFontColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | chip激活时的文字颜色。<br/>默认值：$r('sys.color.ohos_id_color_text_primary_contrary')。<br/>为undefined时，selectedFontColor走默认值。 | 100| selectedBackgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | chip激活时的背景颜色。<br/>默认值：$r('sys.color.ohos_id_color_emphasize')。<br/>为undefined时，selectedBackgroundColor走默认值。 | 101 102> **说明：** 103> 104> 1.操作块的大小可以是两种类型，一种是ChipSize，为方便使用，有两种尺寸可选分别是NORMAL和SMALL；另一种是SizeOptions。 105> 106> 2.backgroundColor、selectedBackgroundColor赋值undefined时，显示默认背景颜色，赋值非法值时，背景色透明。 107 108## ChipGroupSpaceOptions 109 110ChipGroupSpaceOptions 定义了chipGroup左右内边距，以及chip与chip直接的间距。 111 112**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 113 114**系统能力：** SystemCapability.ArkUI.ArkUI.Full 115 116| 名称 | 类型 | 必填 | 说明 | 117| ---------- | -------------- | ---- | ------------------------------------------------ | 118| itemSpace | string \| number | 否 | chip与chip之间的间距（不支持百分比）。<br/>默认值：8<br/>单位：vp<br/>为undefined时，itemSpace走默认值。 | 119| startSpace | [Length](ts-types.md#length) | 否 | 左侧内边距（不支持百分比）。<br/>默认值：16<br/>单位：vp<br/>为undefined时，startSpace走默认值。 | 120| endSpace | [Length](ts-types.md#length) | 否 | 右侧内边距（不支持百分比）。<br/>默认值：16<br/>单位：vp<br/>为undefined时，endSpace走默认值。 | 121 122## ChipGroupPaddingOptions 123 124ChipGroupPaddingOptions 定义了chipGroup上下内边距，以便控制chipGroup的整体高度。 125 126**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 127 128**系统能力：** SystemCapability.ArkUI.ArkUI.Full 129 130| 名称 | 类型 | 必填 | 说明 | 131| ------ | -------------- | ---- | ------------------------------------------------ | 132| top | [Length](ts-types.md#length) | 是 | chipGroup的上方内边距（不支持百分比）。<br/>默认值：14<br/>为undefined时，top走默认值。 | 133| bottom | [Length](ts-types.md#length) | 是 | chipGroup的上方内边距（不支持百分比）。<br/>默认值：14<br/>为undefined时，bottom走默认值。 | 134 135## SuffixImageIconOptions<sup>14+</sup> 136 137后缀图标选项类型。 138 139继承于[IconOptions](#iconoptions)。 140 141**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 142 143**系统能力：** SystemCapability.ArkUI.ArkUI.Full 144 145| 名称 | 类型 | 必填 | 说明 | 146| ---- | ---- | --- | ---- | 147| action | [VoidCallback](ts-types.md#voidcallback12) | 否 | 后缀图标响应事件。| 148| accessibilityText | [ResourceStr](ts-types.md#resourcestr) | 否 | 后缀图标无障碍文本属性。用于为用户进一步说明后缀图标，开发人员可为后缀图标的该属性设置相对较详细的解释文本，帮助用户理解将要执行的操作。如帮助用户理解将要执行的操作可能导致什么后果，尤其是当这些后果无法从后缀图标本身属性与无障碍文本中了解到时。若后缀图标既拥有文本属性又拥有无障碍说明属性，则后缀图标被选中时，先播报后缀图标的文本属性，再播报无障碍说明属性的内容。| 149| accessibilityDescription | [ResourceStr](ts-types.md#resourcestr) | 否 | 后缀图标的无障碍描述。此描述用于向用户详细解释后缀图标，开发人员应为后缀图标的这一属性提供较为详尽的文本说明，以协助用户理解即将执行的操作及其可能产生的后果。特别是当这些后果无法仅从后缀图标的属性和无障碍文本中直接获知时。如果后缀图标同时具备文本属性和无障碍说明属性，当后缀图标被选中时，系统将首先播报后缀图标的文本属性，随后播报无障碍说明属性的内容。| 150| accessibilityLevel | string | 否 | 后缀图标无障碍重要性。用于控制后缀图标是否可被无障碍辅助服务所识别。<br>支持的值为:<br>"auto"：后缀图标存在action时转化为“yes”，不存在action时，转化为“no”。<br>"yes"：后缀图标可被无障碍辅助服务所识别。<br>"no"：后缀图标不可被无障碍辅助服务所识别。<br>"no-hide-descendants"：后缀图标及其所有子组件不可被无障碍辅助服务所识别。<br>默认值："auto"。| 151 152## SymbolItemOptions<sup>14+</sup> 153 154ChipGroup尾部图标选项类型。 155 156**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 157 158**系统能力：** SystemCapability.ArkUI.ArkUI.Full 159 160| 名称 | 类型 | 必填 | 说明 | 161| ---- | ---- | --- | ---- | 162| symbol | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | 是 | 尾部图标属性。| 163| action | [VoidCallback](ts-types.md#voidcallback12) | 是 | 尾部图标响应事件。| 164| accessibilityText | [ResourceStr](ts-types.md#resourcestr) | 否 | 尾部图标无障碍文本属性。用于为用户进一步说明尾部图标，开发人员可为尾部图标的该属性设置相对较详细的解释文本，帮助用户理解将要执行的操作。如帮助用户理解将要执行的操作可能导致什么后果，尤其是当这些后果无法从尾部图标本身属性与无障碍文本中了解到时。若尾部图标既拥有文本属性又拥有无障碍说明属性，则尾部图标被选中时，先播报尾部图标的文本属性，再播报无障碍说明属性的内容。| 165| accessibilityDescription | [ResourceStr](ts-types.md#resourcestr) | 否 | 尾部图标的无障碍描述。此描述用于向用户详细解释尾部图标，开发人员应为尾部图标的这一属性提供较为详尽的文本说明，以协助用户理解即将执行的操作及其可能产生的后果。特别是当这些后果无法仅从尾部图标的属性和无障碍文本中直接获知时。如果尾部图标同时具备文本属性和无障碍说明属性，当尾部图标被选中时，系统将首先播报尾部图标的文本属性，随后播报无障碍说明属性的内容。| 166| accessibilityLevel | string | 否 | 尾部图标无障碍重要性。用于控制尾部图标是否可被无障碍辅助服务所识别。<br>支持的值为:<br>"auto"：尾部图标转化为“yes”。<br>"yes"：尾部图标可被无障碍辅助服务所识别。<br>"no"：尾部图标不可被无障碍辅助服务所识别。<br>"no-hide-descendants"：尾部图标及其所有子组件不可被无障碍辅助服务所识别。<br>默认值："auto"。| 167 168## IconGroupSuffix 169 170**装饰器类型：**@Component 171 172**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 173 174**系统能力：** SystemCapability.ArkUI.ArkUI.Full 175 176| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 177| -------- | ---------------------- | ---- | ----------------------------------------------| ----------------------------------------------| 178| items | Array<[IconItemOptions](#iconitemoptions) \| [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) \| [ SymbolItemOptions](#symbolitemoptions14)> | 是 | @Require @Prop | 自定义builder items。| 179 180> **说明：** 181> 182> 传参SymbolGlyphModifier时，不支持通过symbolEffect修改动效类型和effectStrategy设置动效。 183> 184 185## IconItemOptions 186 187尾部builder接口定义，针对背板大小及颜色设置限制。 188 189**系统能力：** SystemCapability.ArkUI.ArkUI.Full 190 191| 名称 | 类型 | 必填 | 说明 | 192| -------- | -------------- | ---- | ------------------------------ | 193| icon | [IconOptions](#iconoptions) | 是 | 自定义Builder icon。<br/>chip大小是ChipSize.SMALL时，suffix默认值：{width: 16,height: 16}。<br/>chip大小是ChipSize.NORMAL时，suffix默认值：{width: 24,height: 24}。</br> 如果想动态修改size，那么必须在引入[IconGroupSuffix](#icongroupsuffix)时，使用[SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md)类型。<br> **原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 194| action | Callback\<void> | 是 | 自定义Builder items 的Callback<br/>为undefined时，表示解绑事件。<br> **原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 195| accessibilityText<sup>14+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 尾部图标无障碍文本属性。用于为用户进一步说明尾部图标，开发人员可为尾部图标的该属性设置相对较详细的解释文本，帮助用户理解将要执行的操作。如帮助用户理解将要执行的操作可能导致什么后果，尤其是当这些后果无法从尾部图标本身属性与无障碍文本中了解到时。若尾部图标既拥有文本属性又拥有无障碍说明属性，则尾部图标被选中时，先播报尾部图标的文本属性，再播报无障碍说明属性的内容。<br> **原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。| 196| accessibilityDescription<sup>14+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 尾部图标无障碍描述。此描述用于向用户详细解释尾部图标，开发人员应为尾部图标的这一属性提供较为详尽的文本说明，以协助用户理解即将执行的操作及其可能产生的后果。特别是当这些后果无法仅从尾部图标的属性和无障碍文本中直接获知时。如果尾部图标同时具备文本属性和无障碍说明属性，当尾部图标被选中时，系统将首先播报尾部图标的文本属性，随后播报无障碍说明属性的内容。<br> **原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。| 197| accessibilityLevel<sup>14+</sup> | string | 否 | 尾部图标无障碍重要性。用于控制尾部图标是否可被无障碍辅助服务所识别。<br>支持的值为:<br>"auto"：尾部图标转化为“yes”。<br>"yes"：尾部图标可被无障碍辅助服务所识别。<br>"no"：尾部图标不可被无障碍辅助服务所识别。<br>"no-hide-descendants"：尾部图标及其所有子组件不可被无障碍辅助服务所识别。<br>默认值："auto"。<br> **原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。| 198 199## IconOptions 200 201IconOptions定义图标的共通属性。 202 203**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 204 205**系统能力：** SystemCapability.ArkUI.ArkUI.Full 206 207| 名称 | 类型 | 必填 | 说明 | 208| ---- | -------------------------------------- | ---- | ------------------------------------------------------------ | 209| src | [ResourceStr](ts-types.md#resourcestr) | 是 | 图标图片或图片地址引用。 | 210| size | [SizeOptions](ts-types.md#sizeoptions) | 否 | 图标大小，不支持百分比。| 211 212## LabelOptions 213 214Label定义图标的共通属性。 215 216**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 217 218**系统能力：** SystemCapability.ArkUI.ArkUI.Full 219 220| 名称 | 类型 | 必填 | 说明 | 221| ---- | ------ | ---- | -------- | 222| text | string | 是 | 文本属性 | 223 224## 示例 225 226### 示例1（无最右侧的builder） 227 228该示例实现了无最右侧的builder时效果。 229 230```typescript 231import { ChipSize, ChipGroup } from '@kit.ArkUI' 232 233@Entry 234@Preview 235@Component 236struct Index { 237 @State selected_index: Array<number> = [0, 1, 2, 3, 4, 5, 6] 238 build() { 239 Column() { 240 ChipGroup({ 241 items: [ 242 { 243 // 此处 'app.media.icon' 仅作示例，请替换为实际使用图片。 244 prefixIcon: { src: $r('app.media.icon') }, 245 label: { text: "操作块1" }, 246 suffixIcon: { src: $r('sys.media.ohos_ic_public_cut') }, 247 allowClose: false 248 }, 249 { 250 prefixIcon: { src: $r('sys.media.ohos_ic_public_copy') }, 251 label: { text: "操作块2" }, 252 allowClose: true 253 }, 254 { 255 prefixIcon: { src: $r('sys.media.ohos_ic_public_clock') }, 256 label: { text: "操作块3" }, 257 allowClose: true 258 }, 259 { 260 prefixIcon: { src: $r('sys.media.ohos_ic_public_cast_stream') }, 261 label: { text: "操作块4" }, 262 allowClose: true 263 }, 264 { 265 prefixIcon: { src: $r('sys.media.ohos_ic_public_cast_mirror') }, 266 label: { text: "操作块5" }, 267 allowClose: true 268 }, 269 { 270 prefixIcon: { src: $r('sys.media.ohos_ic_public_cast_stream') }, 271 label: { text: "操作块6" }, 272 allowClose: true 273 }, 274 ], 275 itemStyle: { 276 size: ChipSize.SMALL, 277 backgroundColor: $r('sys.color.ohos_id_color_button_normal'), 278 fontColor: $r('sys.color.ohos_id_color_text_primary'), 279 selectedBackgroundColor: $r('sys.color.ohos_id_color_emphasize'), 280 selectedFontColor: $r('sys.color.ohos_id_color_text_primary_contrary'), 281 }, 282 selectedIndexes: this.selected_index, 283 multiple: false, 284 chipGroupSpace: { itemSpace: 8, endSpace: 0 }, 285 chipGroupPadding: { top: 10, bottom: 10 }, 286 onChange: (activatedChipsIndex:Array<number>) => { 287 console.log('chips on clicked, activated index ' + activatedChipsIndex) 288 }, 289 }) 290 } 291 } 292} 293``` 294 295 296 297### 示例2（有最右侧的builder） 298 299该示例通过配置suffix实现最右侧的自定义组件效果。 300 301```typescript 302import { ChipSize, ChipGroup, IconGroupSuffix } from '@kit.ArkUI' 303 304@Entry 305@Preview 306@Component 307struct Index { 308 @State selected_index: Array<number> = [0, 1, 2, 3, 4, 5, 6] 309 @State selected_state: boolean = true; 310 311 @LocalBuilder 312 ChipGroupSuffix(): void { 313 IconGroupSuffix({ 314 items: [{ 315 icon: { src: $r('sys.media.ohos_ic_public_search_filled'), size: { width: 36, height: 36 } }, 316 action: () => { 317 if (this.selected_state == false) { 318 this.selected_index = [0, 1, 2, 3, 4, 5, 6] 319 this.selected_state = true 320 } else { 321 this.selected_index = [] 322 this.selected_state = false 323 } 324 } 325 } 326 ] 327 }) 328 } 329 330 build() { 331 Column() { 332 ChipGroup({ 333 items: [ 334 { 335 prefixIcon: { src: $r('app.media.icon') }, 336 label: { text: "操作块1" }, 337 suffixIcon: { src: $r('sys.media.ohos_ic_public_cut') }, 338 allowClose: false 339 }, 340 { 341 prefixIcon: { src: $r('sys.media.ohos_ic_public_copy') }, 342 label: { text: "操作块2" }, 343 allowClose: true 344 }, 345 { 346 prefixIcon: { src: $r('sys.media.ohos_ic_public_clock') }, 347 label: { text: "操作块3" }, 348 allowClose: true 349 }, 350 { 351 prefixIcon: { src: $r('sys.media.ohos_ic_public_cast_stream') }, 352 label: { text: "操作块4" }, 353 allowClose: true 354 }, 355 { 356 prefixIcon: { src: $r('sys.media.ohos_ic_public_cast_mirror') }, 357 label: { text: "操作块5" }, 358 allowClose: true 359 }, 360 { 361 prefixIcon: { src: $r('sys.media.ohos_ic_public_cast_stream') }, 362 label: { text: "操作块6" }, 363 allowClose: true 364 }, 365 ], 366 itemStyle: { 367 size: ChipSize.NORMAL, 368 backgroundColor: $r('sys.color.ohos_id_color_button_normal'), 369 fontColor: $r('sys.color.ohos_id_color_text_primary'), 370 selectedBackgroundColor: $r('sys.color.ohos_id_color_emphasize'), 371 selectedFontColor: $r('sys.color.ohos_id_color_text_primary_contrary'), 372 }, 373 selectedIndexes: this.selected_index, 374 multiple: true, 375 chipGroupSpace: { itemSpace: 8, endSpace: 0 }, 376 chipGroupPadding: { top: 10, bottom: 10 }, 377 onChange: (activatedChipsIndex: Array<number>) => { 378 console.log('chips on clicked, activated index ' + activatedChipsIndex) 379 }, 380 suffix: this.ChipGroupSuffix 381 }) 382 } 383 } 384} 385``` 386 387 388 389### 示例3（设置Symbol类型图标） 390该示例实现了IconGroupSuffix及ChipGroup传入SymbolGlyph资源。 391```typescript 392import { ChipSize, ChipGroup, IconGroupSuffix, SymbolGlyphModifier } from '@kit.ArkUI' 393 394@Entry 395@Preview 396@Component 397struct Index { 398 @State selected_index: Array<number> = [0, 1, 2, 3, 4, 5, 6]; 399 @State selected_state: boolean = true; 400 @State prefixModifierNormal: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_star')); 401 @State prefixModifierActivated: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_star')).fontColor([Color.Red]); 402 @State suffixModifierNormal: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_wifi')); 403 @State suffixModifierActivated: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_wifi')).fontColor([Color.Red]); 404 405 @LocalBuilder 406 ChipGroupSuffix(): void { 407 IconGroupSuffix({ 408 items: [ 409 new SymbolGlyphModifier($r('sys.symbol.magnifyingglass')) 410 .onClick(() => { 411 if (this.selected_state == false) { 412 this.selected_index = [0, 1, 2, 3, 4, 5, 6]; 413 this.selected_state = true; 414 } else { 415 this.selected_index = []; 416 this.selected_state = false; 417 } 418 }) 419 ] 420 }) 421 } 422 423 build() { 424 Column() { 425 ChipGroup({ 426 items: [ 427 { 428 prefixSymbol: { normal: this.prefixModifierNormal, activated: this.prefixModifierActivated }, 429 label: { text: "操作块1" }, 430 suffixSymbol: { normal: this.suffixModifierNormal, activated: this.suffixModifierActivated }, 431 allowClose: false, 432 }, 433 { 434 prefixSymbol: { normal: this.prefixModifierNormal, activated: this.prefixModifierActivated }, 435 label: { text: "操作块2" }, 436 allowClose: true, 437 }, 438 { 439 prefixIcon: { src: $r('sys.media.ohos_ic_public_clock') }, 440 label: { text: "操作块3" }, 441 allowClose: true, 442 }, 443 { 444 prefixIcon: { src: $r('sys.media.ohos_ic_public_cast_stream') }, 445 label: { text: "操作块4" }, 446 allowClose: true, 447 }, 448 { 449 prefixIcon: { src: $r('sys.media.ohos_ic_public_cast_mirror') }, 450 label: { text: "操作块5" }, 451 allowClose: true, 452 }, 453 { 454 prefixIcon: { src: $r('sys.media.ohos_ic_public_cast_stream') }, 455 label: { text: "操作块6" }, 456 allowClose: true, 457 }, 458 ], 459 itemStyle: { 460 size: ChipSize.NORMAL, 461 backgroundColor: $r('sys.color.ohos_id_color_button_normal'), 462 fontColor: $r('sys.color.ohos_id_color_text_primary'), 463 selectedBackgroundColor: $r('sys.color.ohos_id_color_emphasize'), 464 selectedFontColor: $r('sys.color.ohos_id_color_text_primary_contrary'), 465 }, 466 selectedIndexes: this.selected_index, 467 multiple: true, 468 chipGroupSpace: { itemSpace: 8, endSpace: 0 }, 469 chipGroupPadding: { top: 10, bottom: 10 }, 470 onChange: (activatedChipsIndex: Array<number>) => { 471 console.log('chips on clicked, activated index ' + activatedChipsIndex) 472 }, 473 suffix: this.ChipGroupSuffix 474 }) 475 } 476 } 477} 478 479``` 480 481 482### 示例4（单选时无障碍朗读） 483 484该示例实现了ChipGroup在单选的情况下，有后缀区域和无后缀区域的屏幕朗读功能。 485 486```typescript 487import { ChipGroup, IconGroupSuffix, SymbolGlyphModifier } from '@kit.ArkUI'; 488 489@Builder function DefaultFunction(): void {} 490 491@Component 492struct SectionGroup { 493 @Prop 494 @Require 495 title: ResourceStr; 496 @BuilderParam 497 @Require 498 content: () => void = DefaultFunction; 499 500 build() { 501 Column({ space: 4 }) { 502 Text(this.title) 503 .fontColor('#FF666666') 504 .fontSize(12) 505 Column({ space: 8 }) { 506 this.content() 507 } 508 } 509 .alignItems(HorizontalAlign.Start) 510 .width('100%') 511 } 512} 513@Component 514struct SectionItem { 515 @Prop 516 @Require 517 title: ResourceStr; 518 @BuilderParam 519 @Require 520 content: () => void = DefaultFunction; 521 522 build() { 523 Column({ space: 12 }) { 524 Text(this.title) 525 this.content() 526 } 527 .backgroundColor('#FFFFFFFF') 528 .borderRadius(12) 529 .padding(12) 530 .width('100%') 531 } 532} 533 534@Entry 535@Component 536export struct ChipGroupExample2 { 537 @LocalBuilder 538 Suffix() { 539 IconGroupSuffix({ 540 items: [ 541 { 542 icon: { src: $r('sys.media.ohos_ic_public_more'), }, 543 accessibilityText: '更多', 544 accessibilityDescription: '新手提醒', 545 action: () => { 546 this.getUIContext().getPromptAction().showToast({ 547 message: '更多按钮被点击！' 548 }); 549 } 550 }, 551 { 552 symbol: new SymbolGlyphModifier($r('sys.symbol.more')), 553 accessibilityText: '更多', 554 accessibilityDescription: '新手提醒', 555 action: () => { 556 this.getUIContext().getPromptAction().showToast({ 557 message: '更多按钮被点击！' 558 }); 559 } 560 }, 561 { 562 icon: { src: $r('sys.media.ohos_ic_public_more'), }, 563 accessibilityText: '更多', 564 accessibilityDescription: '新手提醒', 565 accessibilityLevel: 'no', 566 action: () => { 567 this.getUIContext().getPromptAction().showToast({ 568 message: '更多按钮被点击！' 569 }); 570 } 571 } 572 ] 573 }) 574 } 575 576 build() { 577 NavDestination() { 578 Scroll() { 579 Column({ space: 12 }) { 580 SectionGroup({ title: '可用的' }) { 581 SectionItem({ title: '单选 无后缀区域' }) { 582 ChipGroup({ 583 items: [ 584 { 585 prefixIcon: { 586 src: $r('app.media.startIcon') 587 }, 588 label: { text: "选项1" }, 589 suffixImageIcon: { 590 src: $r('sys.media.save_button_picture'), 591 accessibilityText: '保存', 592 action: () => { 593 this.getUIContext().getPromptAction().showToast({ 594 message: '后缀图标被点击！' 595 }); 596 }, 597 } 598 }, 599 { 600 label: { text: "选项2" }, 601 suffixSymbol: { 602 normal: new SymbolGlyphModifier($r('sys.symbol.save')), 603 activated: new SymbolGlyphModifier($r('sys.symbol.save')) 604 }, 605 suffixSymbolOptions: { 606 normalAccessibility: { 607 accessibilityText: '保存' 608 }, 609 action: () => { 610 this.getUIContext().getPromptAction().showToast({ 611 message: '后缀图标被点击！' 612 }); 613 } 614 } 615 }, 616 { 617 label: { text: "选项3" }, 618 suffixIcon: { src: $r('sys.media.save_button_picture'), } 619 }, 620 { label: { text: "选项4" } }, 621 { label: { text: "选项5" } }, 622 { label: { text: "选项6" } }, 623 { label: { text: "选项7" } }, 624 { label: { text: "选项8" } }, 625 { label: { text: "选项9" } }, 626 ] 627 }) 628 } 629 SectionItem({ title: '单选 有后缀区域' }) { 630 ChipGroup({ 631 items: [ 632 { label: { text: "选项1" } }, 633 { label: { text: "选项2" } }, 634 { label: { text: "选项3" } }, 635 { label: { text: "选项4" } }, 636 { label: { text: "选项5" } }, 637 { label: { text: "选项6" } }, 638 { label: { text: "选项7" } }, 639 { label: { text: "选项8" } }, 640 { label: { text: "选项9" } }, 641 ], 642 suffix: this.Suffix.bind(this), 643 }) 644 } 645 } 646 } 647 } 648 .padding({ 649 top: 8, 650 bottom: 8, 651 left: 16, 652 right: 16, }) 653 } 654 .title('基础用法') 655 .backgroundColor('#F1F3F5') 656 } 657} 658``` 659 660### 示例5（多选时无障碍朗读） 661 662该示例实现了ChipGroup在多选的情况下，有后缀区域和无后缀区域的屏幕朗读功能。 663 664```typescript 665import { ChipGroup, IconGroupSuffix, SymbolGlyphModifier } from '@kit.ArkUI'; 666 667@Builder function DefaultFunction(): void {} 668 669@Component 670struct SectionGroup { 671 @Prop 672 @Require 673 title: ResourceStr; 674 @BuilderParam 675 @Require 676 content: () => void = DefaultFunction; 677 678 build() { 679 Column({ space: 4 }) { 680 Text(this.title) 681 .fontColor('#FF666666') 682 .fontSize(12) 683 Column({ space: 8 }) { 684 this.content() 685 } 686 } 687 .alignItems(HorizontalAlign.Start) 688 .width('100%') 689 } 690} 691@Component 692struct SectionItem { 693 @Prop 694 @Require 695 title: ResourceStr; 696 @BuilderParam 697 @Require 698 content: () => void = DefaultFunction; 699 700 build() { 701 Column({ space: 12 }) { 702 Text(this.title) 703 this.content() 704 } 705 .backgroundColor('#FFFFFFFF') 706 .borderRadius(12) 707 .padding(12) 708 .width('100%') 709 } 710} 711 712@Entry 713@Component 714export struct ChipGroupExample2 { 715 @LocalBuilder 716 Suffix() { 717 IconGroupSuffix({ 718 items: [ 719 { 720 icon: { src: $r('sys.media.ohos_ic_public_more'), }, 721 accessibilityText: '更多', 722 accessibilityDescription: '新手提醒', 723 action: () => { 724 this.getUIContext().getPromptAction().showToast({ 725 message: '更多按钮被点击！' 726 }); 727 } 728 }, 729 { 730 symbol: new SymbolGlyphModifier($r('sys.symbol.more')), 731 accessibilityText: '更多', 732 accessibilityDescription: '新手提醒', 733 action: () => { 734 this.getUIContext().getPromptAction().showToast({ 735 message: '更多按钮被点击！' 736 }); 737 } 738 }, 739 { 740 icon: { src: $r('sys.media.ohos_ic_public_more'), }, 741 accessibilityText: '更多', 742 accessibilityDescription: '新手提醒', 743 accessibilityLevel: 'no', 744 action: () => { 745 this.getUIContext().getPromptAction().showToast({ 746 message: '更多按钮被点击！' 747 }); 748 } 749 } 750 ] 751 }) 752 } 753 754 build() { 755 NavDestination() { 756 Scroll() { 757 Column({ space: 12 }) { 758 SectionGroup({ title: '可用的' }) { 759 SectionItem({ title: '多选 无后缀区域' }) { 760 ChipGroup({ 761 items: [ 762 { label: { text: "选项1" } }, 763 { label: { text: "选项2" } }, 764 { label: { text: "选项3" } }, 765 { label: { text: "选项4" } }, 766 { label: { text: "选项5" } }, 767 { label: { text: "选项6" } }, 768 { label: { text: "选项7" } }, 769 { label: { text: "选项8" } }, 770 { label: { text: "选项9" } }, 771 ], 772 multiple: true 773 }) 774 } 775 SectionItem({ title: '多选 有后缀区域' }) { 776 ChipGroup({ 777 items: [ 778 { label: { text: "选项1" } }, 779 { label: { text: "选项2" } }, 780 { label: { text: "选项3" } }, 781 { label: { text: "选项4" } }, 782 { label: { text: "选项5" } }, 783 { label: { text: "选项6" } }, 784 { label: { text: "选项7" } }, 785 { label: { text: "选项8" } }, 786 { label: { text: "选项9" } }, 787 ], 788 suffix: this.Suffix.bind(this), 789 multiple: true, 790 }) 791 } 792 } 793 } 794 } 795 .padding({ 796 top: 8, 797 bottom: 8, 798 left: 16, 799 right: 16, }) 800 } 801 .title('基础用法') 802 .backgroundColor('#F1F3F5') 803 } 804} 805```
