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