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