鸿蒙5.0版开辟：ArkTS高级组件-@ohos.arkui.advanced.Chip (操纵块组件) ...

往期鸿蒙全套实战文章必看：

• 鸿蒙开辟核心知识点，看这篇文章就够了
  
• 最新版！鸿蒙HarmonyOS Next应用开辟实战学习门路
  
• 鸿蒙HarmonyOS NEXT开辟技术最全学习门路指南
  
• 鸿蒙应用开辟实战项目，看这一篇文章就够了（部分项目附源码）
  

---

@ohos.arkui.advanced.Chip (操纵块组件)

操纵块，用于搜索框历史记载或者邮件发送列表等场景。
   分析：
  该组件从API Version 11开始支持。后续版本如有新增内容，则接纳上角标单独标志该内容的起始版本。
  子组件

无
Chip

Chip({options:ChipOptions})
装饰器类型：@Builder
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
参数：
名称类型必填装饰器类型分析optionsChipOptions是@Builder定义chip组件的参数。 ChipOptions

ChipOptions定义chip的样式及具体式样参数。
体系能力： SystemCapability.ArkUI.ArkUI.Full
名称类型必填分析sizeChipSize | SizeOptions否操纵块尺寸。
默认值：ChipSize：ChipSize.NORMAL，
SizeOptions类型参数不支持百分比设置。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。enabledboolean否操纵块是否可选中。
默认值：true
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。activated12+boolean否操纵块是否为激活态。
默认值：falseprefixIconPrefixIconOptions否前缀图标属性。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。labelLabelOptions是文本属性。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。suffixIconSuffixIconOptions否后缀图标属性。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。backgroundColorResourceColor否操纵块背景颜色。
默认值：$r(‘sys.color.ohos_id_color_button_normal’)
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。activatedBackgroundColor12+ResourceColor否操纵块激活时的背景颜色。
默认值：$r(‘sys.color.ohos_id_color_emphasize’)。borderRadiusDimension否操纵块背景圆角半径巨细，不支持百分比。
默认值：$r(‘sys.float.ohos_id_corner_radius_button’)
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。allowCloseboolean否删除图标是否表现。
默认值：true
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。onClose()=>void否默认删除图标点击变乱。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。onClicked12+()=>void否操纵块点击变乱。   分析：
  1.操纵块有最小宽度限制，当用户设置宽度小于最小宽度时，按最小宽度表现。
  2.suffixIcon有传入参数时，allowClose不生效，suffixIcon没有传入参数时，allowClose决定是否表现删除图标。
  3.backgroundColor和activatedBackgroundColor赋值undefined时，表现默认背景颜色，赋值非法值时，背景色透明。
  4.prefixIcon的fillColor默认值：$r('sys.color.ohos_id_color_secondary')，suffixIcon的fillColor默认值：$r('sys.color.ohos_id_color_primary')。fillColor对颜色的分析与Image组件保持一致。
  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组件保持一致。
  ChipSize

ChipSize是chip可指定的尺寸类型，如普通型Chip。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
名称值描述NORMAL“NORMAL”normal尺寸操纵块。SMALL“SMALL”small尺寸操纵块。 IconCommonOptions

IconCommonOptions定义图标的共通属性。
体系能力： SystemCapability.ArkUI.ArkUI.Full
名称类型必填分析srcResourceStr是图标图片或图片地址引用。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。sizeSizeOptions否图标巨细，不支持百分比。
默认值：{width: 16,height: 16}
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。fillColorResourceColor否图标填充颜色。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。activatedFillColor12+ResourceColor否操纵块激活时图标填充颜色。   分析：
  仅在图片格式为svg时，fillColor和activatedFillColor生效。
  PrefixIconOptions

PrefixIconOptions定义前缀图标的属性。
继续于IconCommonOptions。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
SuffixIconOptions

SuffixIconOptions定义后缀图标的属性。
继续于IconCommonOptions。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
名称类型必填分析action() => void否后缀图标设定变乱。 LabelOptions

LabelOptions定义文本的属性。
体系能力： SystemCapability.ArkUI.ArkUI.Full
名称类型必填分析textstring是文本文字内容。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。fontSizeDimension否文字字号，不支持百分比。
默认值：$r(‘sys.float.ohos_id_text_size_button2’)
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。fontColorResourceColor否文字颜色。
默认值：$r(‘sys.color.ohos_id_color_text_primary’)
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。activatedFontColor12+ResourceColor否操纵块激活时的文字颜色。
默认值：$r(‘sys.color.ohos_id_color_text_primary_contrary’)fontFamilystring否文字字体。
默认值：“HarmonyOS Sans”
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。labelMarginLabelMarginOptions否文本与左右侧图标之间间距。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。 LabelMarginOptions

LabelMarginOptions定义文本与左右侧图标之间间距。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
名称类型必填分析leftDimension否文本与左侧图标之间间距，不支持百分比。
默认值：6vp。rightDimension否文本与右侧图标之间间距，不支持百分比。
默认值：6vp。 示例

示例1

自定义删除图标的操纵块。

1. import { Chip, ChipSize } from '@ohos.arkui.advanced.Chip';
3. @Entry
4. @Component
5. struct Index {
6.   build() {
7.     Column({ space: 10 }) {
8.       Chip({
9.         prefixIcon: {
10.           src: $r('app.media.chips'),
11.           size: { width: 16, height: 16 },
12.           fillColor: Color.Red
13.         },
14.         label: {
15.           text: "操作块",
16.           fontSize: 12,
17.           fontColor: Color.Blue,
18.           fontFamily: "HarmonyOS Sans",
19.           labelMargin: { left: 20, right: 30 }
20.         },
21.         suffixIcon: {
22.           src: $r('app.media.close'),
23.           size: { width: 16, height: 16 },
24.           fillColor: Color.Red
25.         },
26.         size: ChipSize.NORMAL,
27.         allowClose: false,
28.         enabled: true,
29.         backgroundColor: $r('sys.color.ohos_id_color_button_normal'),
30.         borderRadius: $r('sys.float.ohos_id_corner_radius_button')
31.       })
32.     }
33.   }
34. }

复制代码

示例2

使用默认删除图标的操纵块。

1. import { Chip, ChipSize } from '@ohos.arkui.advanced.Chip';
3. @Entry
4. @Component
5. struct Index {
6.   build() {
7.     Column({ space: 10 }) {
8.       Chip({
9.         prefixIcon: {
10.           src: $r('app.media.chips'),
11.           size: { width: 16, height: 16 },
12.           fillColor: Color.Blue
13.         },
14.         label: {
15.           text: "操作块",
16.           fontSize: 12,
17.           fontColor: Color.Blue,
18.           fontFamily: "HarmonyOS Sans",
19.           labelMargin: { left: 20, right: 30 }
20.         },
21.         size: ChipSize.NORMAL,
22.         allowClose: true,
23.         enabled: true,
24.         backgroundColor: $r('sys.color.ohos_id_color_button_normal'),
25.         borderRadius: $r('sys.float.ohos_id_corner_radius_button')
26.       })
27.     }
28.   }
29. }

复制代码

示例3

不表现删除图标的操纵块。

1. import { Chip, ChipSize } from '@ohos.arkui.advanced.Chip';
3. @Entry
4. @Component
5. struct Index {
6.   build() {
7.     Column({ space: 10 }) {
8.       Chip({
9.         prefixIcon: {
10.           src: $r('app.media.chips'),
11.           size: { width: 16, height: 16 },
12.           fillColor: Color.Blue
13.         },
14.         label: {
15.           text: "操作块",
16.           fontSize: 12,
17.           fontColor: Color.Blue,
18.           fontFamily: "HarmonyOS Sans",
19.           labelMargin: { left: 20, right: 30 }
20.         },
21.         size: ChipSize.SMALL,
22.         allowClose: false,
23.         enabled: true,
24.         backgroundColor: $r('sys.color.ohos_id_color_button_normal'),
25.         borderRadius: $r('sys.float.ohos_id_corner_radius_button'),
26.         onClose:()=>{
27.           console.log("chip on close")
28.       }
29.       })
30.     }
31.   }
32. }

复制代码

示例4

激活态操纵块。

1. import { Chip, ChipSize } from '@ohos.arkui.advanced.Chip';
3. @Entry
4. @Component
5. struct Index {
6.   @State isActivated: boolean = false
8.   build() {
9.     Column({ space: 10 }) {
10.       Chip({
11.         prefixIcon: {
12.           src: $r('app.media.chips'),
13.           size: { width: 16, height: 16 },
14.           fillColor: Color.Blue,
15.           activatedFillColor: $r('sys.color.ohos_id_color_text_primary_contrary')
16.         },
17.         label: {
18.           text: "操作块",
19.           fontSize: 12,
20.           fontColor: Color.Blue,
21.           activatedFontColor: $r('sys.color.ohos_id_color_text_primary_contrary'),
22.           fontFamily: "HarmonyOS Sans",
23.           labelMargin: { left: 20, right: 30 }
24.         },
25.         size: ChipSize.NORMAL,
26.         allowClose: true,
27.         enabled: true,
28.         activated: this.isActivated,
29.         backgroundColor: $r('sys.color.ohos_id_color_button_normal'),
30.         activatedBackgroundColor: $r('sys.color.ohos_id_color_emphasize'),
31.         borderRadius: $r('sys.float.ohos_id_corner_radius_button'),
32.         onClose:()=>{
33.           console.log("chip on close")
34.         },
35.         onClicked:()=>{
36.           console.log("chip on clicked")
37.         }
38.       })
40.       Button('改变激活状态').onClick(()=>{
41.         this.isActivated = !this.isActivated
42.       })
43.     }
44.   }
45. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。