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