IT评测·应用市场-qidao123.com
标题:
鸿蒙5.0版开辟：ArkTS高级组件-@ohos.arkui.advanced.Chip (操纵块组件)
[打印本页]
作者:
千千梦丶琪
时间:
2024-10-12 04:53
标题:
鸿蒙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
自定义删除图标的操纵块。
import { Chip, ChipSize } from '@ohos.arkui.advanced.Chip';
@Entry
@Component
struct Index {
build() {
Column({ space: 10 }) {
Chip({
prefixIcon: {
src: $r('app.media.chips'),
size: { width: 16, height: 16 },
fillColor: Color.Red
},
label: {
text: "操作块",
fontSize: 12,
fontColor: Color.Blue,
fontFamily: "HarmonyOS Sans",
labelMargin: { left: 20, right: 30 }
},
suffixIcon: {
src: $r('app.media.close'),
size: { width: 16, height: 16 },
fillColor: Color.Red
},
size: ChipSize.NORMAL,
allowClose: false,
enabled: true,
backgroundColor: $r('sys.color.ohos_id_color_button_normal'),
borderRadius: $r('sys.float.ohos_id_corner_radius_button')
})
}
}
}
复制代码
示例2
使用默认删除图标的操纵块。
import { Chip, ChipSize } from '@ohos.arkui.advanced.Chip';
@Entry
@Component
struct Index {
build() {
Column({ space: 10 }) {
Chip({
prefixIcon: {
src: $r('app.media.chips'),
size: { width: 16, height: 16 },
fillColor: Color.Blue
},
label: {
text: "操作块",
fontSize: 12,
fontColor: Color.Blue,
fontFamily: "HarmonyOS Sans",
labelMargin: { left: 20, right: 30 }
},
size: ChipSize.NORMAL,
allowClose: true,
enabled: true,
backgroundColor: $r('sys.color.ohos_id_color_button_normal'),
borderRadius: $r('sys.float.ohos_id_corner_radius_button')
})
}
}
}
复制代码
示例3
不表现删除图标的操纵块。
import { Chip, ChipSize } from '@ohos.arkui.advanced.Chip';
@Entry
@Component
struct Index {
build() {
Column({ space: 10 }) {
Chip({
prefixIcon: {
src: $r('app.media.chips'),
size: { width: 16, height: 16 },
fillColor: Color.Blue
},
label: {
text: "操作块",
fontSize: 12,
fontColor: Color.Blue,
fontFamily: "HarmonyOS Sans",
labelMargin: { left: 20, right: 30 }
},
size: ChipSize.SMALL,
allowClose: false,
enabled: true,
backgroundColor: $r('sys.color.ohos_id_color_button_normal'),
borderRadius: $r('sys.float.ohos_id_corner_radius_button'),
onClose:()=>{
console.log("chip on close")
}
})
}
}
}
复制代码
示例4
激活态操纵块。
import { Chip, ChipSize } from '@ohos.arkui.advanced.Chip';
@Entry
@Component
struct Index {
@State isActivated: boolean = false
build() {
Column({ space: 10 }) {
Chip({
prefixIcon: {
src: $r('app.media.chips'),
size: { width: 16, height: 16 },
fillColor: Color.Blue,
activatedFillColor: $r('sys.color.ohos_id_color_text_primary_contrary')
},
label: {
text: "操作块",
fontSize: 12,
fontColor: Color.Blue,
activatedFontColor: $r('sys.color.ohos_id_color_text_primary_contrary'),
fontFamily: "HarmonyOS Sans",
labelMargin: { left: 20, right: 30 }
},
size: ChipSize.NORMAL,
allowClose: true,
enabled: true,
activated: this.isActivated,
backgroundColor: $r('sys.color.ohos_id_color_button_normal'),
activatedBackgroundColor: $r('sys.color.ohos_id_color_emphasize'),
borderRadius: $r('sys.float.ohos_id_corner_radius_button'),
onClose:()=>{
console.log("chip on close")
},
onClicked:()=>{
console.log("chip on clicked")
}
})
Button('改变激活状态').onClick(()=>{
this.isActivated = !this.isActivated
})
}
}
}
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)
Powered by Discuz! X3.4
