鸿蒙5.0版开发：ArkTS组件-基础组件（Checkbox）
往期鸿蒙全套实战文章必看：[*] 鸿蒙开发核心知识点，看这篇文章就够了
[*] 最新版！鸿蒙HarmonyOS Next应用开发实战学习蹊径
[*] 鸿蒙HarmonyOS NEXT开发技术最全学习蹊径指南
[*] 鸿蒙应用开发实战项目，看这一篇文章就够了（部门项目附源码）
Checkbox
提供多选框组件，通常用于某选项的打开或关闭。
阐明：
API version 11开始，Checkbox默认样式由圆角方形变为圆形。
该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
子组件
无
接口
Checkbox(options?: CheckboxOptions)
多选框组件。
卡片本领： 从API version 9开始，该接口支持在ArkTS卡片中使用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填形貌optionsCheckboxOptions否配置复选框的参数。 CheckboxOptions对象阐明
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
名称类型必填形貌namestring否用于指定多选框名称。groupstring否用于指定多选框所属群组的名称（即所属CheckboxGroup的名称）。
阐明：
未配合使用CheckboxGroup组件时，此值无用。indicatorBuilder12+CustomBuilder否配置多选框的选中样式为自界说组件。自界说组件与Checkbox组件为中心点对齐显示。indicatorBuilder设置为undefined/null时，默认为indicatorBuilder未设置状态。 属性
除支持通用属性外，还支持以下属性：
select
select(value: boolean)
设置多选框是否选中。
从API version 10开始，该属性支持$$双向绑定变量。
卡片本领： 从API version 9开始，该接口支持在ArkTS卡片中使用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填形貌valueboolean是多选框是否选中。
默认值：false selectedColor
selectedColor(value: ResourceColor)
设置多选框选中状态颜色。
卡片本领： 从API version 9开始，该接口支持在ArkTS卡片中使用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填形貌valueResourceColor是多选框选中状态颜色。
默认值：$r(‘sys.color.ohos_id_color_text_primary_activated’)。
异常值按照默认值处置惩罚。 unselectedColor10+
unselectedColor(value: ResourceColor)
设置多选框非选中状态边框颜色。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填形貌valueResourceColor是多选框非选中状态边框颜色。
默认值：‘#33ffffff’。 mark10+
mark(value: MarkStyle)
设置多选框内部图标样式。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填形貌valueMarkStyle是多选框内部图标样式。 从API version 12开始，设置了indicatorBuilder时，按照indicatorBuilder中的内容显示。 shape11+
shape(value: CheckBoxShape)
设置CheckBox组件形状, 包括圆形和圆角方形。
卡片本领： 从API version 11开始，该接口支持在ArkTS卡片中使用。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
系统本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填形貌valueCheckBoxShape是CheckBox组件形状, 包括圆形和圆角方形。
默认值：CheckBoxShape.CIRCLE contentModifier12+
contentModifier(modifier: ContentModifier<CheckBoxConfiguration>)
定制CheckBox内容区的方法。
系统本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填阐明modifierContentModifier<CheckBoxConfiguration>是在CheckBox组件上，定制内容区的方法。
modifier: 内容修改器，开发者须要自界说class实现ContentModifier接口。 变乱
支持通用变乱外，还支持以下变乱：
onChange
onChange(callback: (value: boolean) => void)
当选中状态发生变化时，触发该回调。
卡片本领： 从API version 9开始，该接口支持在ArkTS卡片中使用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填形貌valueboolean是返回true时，表示已选中。返回false时，表示未选中。 MarkStyle10+对象阐明
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
名称类型必填默认值形貌strokeColorResourceColor否Color.White内部图标颜色。sizeLength否-内部图标大小，单元vp。默认大小与多选框组件宽度设置值同等。
不支持百分比情势设置。当设置为非法值时，按照默认值处置惩罚。strokeWidthLength否2内部图标粗细，单元vp。不支持百分比情势设置。当设置为非法值时，按照默认值处置惩罚。 CheckBoxShape11+枚举类型阐明
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
名称值阐明CIRCLE0圆形ROUNDED_SQUARE1圆角方形 CheckBoxConfiguration12+对象阐明
开发者须要自界说class实现ContentModifier接口。
参数名类型默认值阐明namestring-当前多选框名称。selectedbooleanfalse指示多选框是否被选中。
如果select属性没有设置默认值是false。
如果设置select属性，此值与设置select属性的值雷同。triggerChangeCallback<boolean>-触发多选框选中状态变化。 示例
示例1
// xxx.ets
@Entry
@Component
struct CheckboxExample {
build() {
Flex({ justifyContent: FlexAlign.SpaceAround }) {
Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
.select(true)
.selectedColor(0xed6f21)
.shape(CheckBoxShape.CIRCLE)
.onChange((value: boolean) => {
console.info('Checkbox1 change is' + value)
})
Checkbox({ name: 'checkbox2', group: 'checkboxGroup' })
.select(false)
.selectedColor(0x39a2db)
.shape(CheckBoxShape.ROUNDED_SQUARE)
.onChange((value: boolean) => {
console.info('Checkbox2 change is' + value)
})
}
}
}
https://i-blog.csdnimg.cn/direct/0fae6900721f4c4cb851318d7f08297b.png
示例2
// xxx.ets
@Entry
@Component
struct Index {
build() {
Row() {
Column() {
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
.selectedColor(0x39a2db)
.shape(CheckBoxShape.ROUNDED_SQUARE)
.onChange((value: boolean) => {
console.info('Checkbox1 change is'+ value)
})
.mark({
strokeColor:Color.Black,
size: 50,
strokeWidth: 5
})
.unselectedColor(Color.Red)
.width(30)
.height(30)
Text('Checkbox1').fontSize(20)
}
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
Checkbox({ name: 'checkbox2', group: 'checkboxGroup' })
.selectedColor(0x39a2db)
.shape(CheckBoxShape.ROUNDED_SQUARE)
.onChange((value: boolean) => {
console.info('Checkbox2 change is' + value)
})
.width(30)
.height(30)
Text('Checkbox2').fontSize(20)
}
}
.width('100%')
}
.height('100%')
}
}
https://i-blog.csdnimg.cn/direct/4fe0eaa4d3154b41b09da52e654a6436.png
示例3
该示例实现了自界说复选框样式的功能，自界说样式实现了一个五边形复选框，如果选中，内部会出现赤色三角图案，标题会显示选中字样，如果取消选中，赤色三角图案消散，标题会显示非选中字样。
// xxx.ets
class MyCheckboxStyle implements ContentModifier<CheckBoxConfiguration> {
selectedColor: Color = Color.White
constructor(selectedColor: Color) {
this.selectedColor = selectedColor;
}
applyContent() : WrappedBuilder<>
{
return wrapBuilder(buildCheckbox)
}
}
@Builder function buildCheckbox(config: CheckBoxConfiguration) {
Column({space:10}) {
Text(config.name+ (config.selected ? "（ 选中 ）" : "（ 非选中 ）")).margin({right : 70, top : 50})
Text(config.enabled ? "enabled true" : "enabled false").margin({right : 110})
Shape() {
Path().width(100).height(100).commands('M100 0 L0 100 L50 200 L150 200 L200 100 Z').fillOpacity(0).strokeWidth(3).onClick(()=>{
if (config.selected) {
config.triggerChange(false)
} else {
config.triggerChange(true)
}
}).opacity(config.enabled ? 1 : 0.1)
Path().width(10).height(10).commands('M50 0 L100 100 L0 100 Z')
.visibility(config.selected ? Visibility.Visible : Visibility.Hidden)
.fill(config.selected ? (config.contentModifier as MyCheckboxStyle).selectedColor : Color.Black)
.stroke((config.contentModifier as MyCheckboxStyle).selectedColor)
.margin({left:11,top:10})
.opacity(config.enabled ? 1 : 0.1)
}
.width(300)
.height(200)
.viewPort({ x: 0, y: 0, width: 310, height: 310 })
.strokeLineJoin(LineJoinStyle.Miter)
.strokeMiterLimit(5)
.margin({left:50})
}
}
@Entry
@Component
struct Index {
@State checkboxEnabled: boolean = true;
build() {
Column({ space: 100 }) {
Checkbox({ name: '复选框状态', group: 'checkboxGroup' })
.contentModifier(new MyCheckboxStyle(Color.Red))
.onChange((value: boolean) => {
console.info('Checkbox change is' + value)
}).enabled(this.checkboxEnabled)
Row() {
Toggle({ type: ToggleType.Switch, isOn: true }).onChange((value: boolean) => {
if (value) {
this.checkboxEnabled = true
} else {
this.checkboxEnabled = false
}
})
}
}.margin({top : 30})
}
}
https://i-blog.csdnimg.cn/direct/4ba088a8d4174795ad9464d9a3776563.png
示例4
该示例设置选中样式为Text。
// xxx.ets
@Entry
@Component
struct CheckboxExample {
@Builder
indicatorBuilder(value: number) {
Column(){
Text(value > 99 ? '99+': value.toString())
.textAlign(TextAlign.Center)
.fontSize(value > 99 ?'16vp': '20vp')
.fontWeight(FontWeight.Medium)
.fontColor('#ffffffff')
}
}
build() {
Row() {
Column() {
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center}) {
Checkbox({ name: 'checkbox1', group: 'checkboxGroup', indicatorBuilder:()=>{this.indicatorBuilder(9)}})
.shape(CheckBoxShape.CIRCLE)
.onChange((value: boolean) => {
console.info('Checkbox1 change is'+ value)
})
.mark({
strokeColor:Color.Black,
size: 50,
strokeWidth: 5
})
.width(30)
.height(30)
Text('Checkbox1').fontSize(20)
}.padding(15)
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
Checkbox({ name: 'checkbox2', group: 'checkboxGroup', indicatorBuilder:()=>{this.indicatorBuilder(100)}})
.shape(CheckBoxShape.ROUNDED_SQUARE)
.onChange((value: boolean) => {
console.info('Checkbox2 change is' + value)
})
.width(30)
.height(30)
Text('Checkbox2').fontSize(20)
}
}
.width('100%')
}
.height('100%')
}
}
https://i-blog.csdnimg.cn/direct/33354e52bc24466e8e1ba3b22c47e876.png
看完三件事❤️
[*]如果你以为这篇内容对你还蛮有资助，我想约请你帮我三个小忙：
[*]点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
[*]关注作者，不定期分享原创知识。
[*]同时可以等待后续文章ing
页:
[1]