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