#跟着若城学鸿蒙# UI组件篇-Checkbox及其属性
前言
在现代用户界面设计中，复选框（Checkbox）是一个不可或缺的元素。它允许用户在一组选项中进行多项选择，提供了一种直观且易于使用的交互方式。ArkUI 框架中的 Checkbox 组件不仅继承了传统复选框的基本功能，还通过丰富的属性和事件，为开发者提供了更高的定制性和灵活性。本文将详细介绍 ArkUI 中的 Checkbox 组件，包括其基本用法、属性、事件、样式定制以及在复杂场景中的应用示例。
基本用法
Checkbox 组件用于实现多选功能，支持多种配置选项，如形状、颜色和自定义选中样式。Checkbox 组件可以从 API version 8 开始支持，并在后续版本中增加了更多功能和属性。
基本示例
以下是一个基本的 Checkbox 使用示例：
@Entry
@Component
struct CheckboxExample {
build() {
Flex({ justifyContent: FlexAlign.SpaceEvenly }) {
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);
})
}
}
} 在这个示例中，我们创建了两个 Checkbox 组件，分别设置了不同的形状和选中颜色，并绑定了 onChange 事件来监听选中状态的变化。
属性详解
Checkbox 组件支持多种属性，以满足不同的定制需求。以下是一些常用的属性：
select
select(value: boolean) 方法用于设置 Checkbox 的选中状态。从 API version 10 开始，该属性支持双向绑定变量。从 API version 18 开始，该属性支持 !! 双向绑定变量。
Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }) .select(true) selectedColor
selectedColor(value: ResourceColor) 方法用于设置 Checkbox 选中状态的颜色。
Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }) .selectedColor(0xed6f21) unselectedColor
unselectedColor(value: ResourceColor) 方法用于设置 Checkbox 非选中状态的边框颜色。
Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }) .unselectedColor(0x39a2db) mark
mark(value: MarkStyle) 方法用于设置 Checkbox 内部图标的样式。
Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }) .mark({ strokeColor: Color.Black, size: 50, strokeWidth: 5 }) shape
shape(value: CheckBoxShape) 方法用于设置 Checkbox 的形状，包括圆形和圆角方形。
Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }) .shape(CheckBoxShape.CIRCLE) contentModifier
contentModifier(modifier: ContentModifier<CheckBoxConfiguration>) 方法用于定制 Checkbox 的内容区。
Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }) .contentModifier(new MyCheckboxStyle(Color.Red)) 事件处理
Checkbox 组件支持多种事件，以便开发者可以根据用户的交互进行相应的处理。以下是一些常用的事件：
onChange
onChange(callback: OnCheckboxChangeCallback) 方法用于监听 Checkbox 的选中状态变化。
Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }) .onChange((value: boolean) => { console.info('Checkbox1 change is ' + value); }) onChange18+
onChange(callback: Optional<OnCheckboxChangeCallback>) 方法与 onChange 类似，但 callback 参数新增了对 undefined 类型的支持。
Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }) .onChange((value: boolean) => { console.info('Checkbox1 change is ' + value); }) 样式定制
Checkbox 组件的样式可以通过多种方式进行定制，以满足不同的设计需求。以下是一些常用的样式定制方法：
自定义选中样式
通过 indicatorBuilder 方法，可以自定义 Checkbox 的选中样式。
@Builder
indicatorBuilder(value: number) {
Column(){
Text(value > 99 ? '99+': value.toString())
.textAlign(TextAlign.Center)
.fontSize(value > 99 ? '16vp': '20vp')
.fontWeight(FontWeight.Medium)
.fontColor('#ffffffff')
}
}
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)自定义内容区
通过 contentModifier 方法，可以定制 Checkbox 的内容区。
@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;
}
})
}.position({ x: 50, y: 130 })
}.margin({ top: 30 })
}
} 复杂场景应用
Checkbox 组件不仅可以用于简单的多选功能，还可以在复杂的场景中进行应用。以下是一些复杂场景的应用示例：
示例1：设置多选框形状
该示例通过配置 CheckBoxShape 实现圆形和圆角方形多选框样式。
@Entry
@Component
struct CheckboxExample {
build() {
Flex({ justifyContent: FlexAlign.SpaceEvenly }) {
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);
})
}
}
} 示例2：自定义多选框样式
该示例实现了自定义复选框样式的功能，自定义样式实现了一个五边形复选框，如果选中，内部会出现红色三角图案，标题会显示选中字样，如果取消选中，红色三角图案消失，标题会显示非选中字样。
class MyCheckboxStyle implements ContentModifier<CheckBoxConfiguration> {
selectedColor: Color = Color.White;
constructor(selectedColor: Color) {
this.selectedColor = selectedColor;
}
applyContent(): WrappedBuilder<[CheckBoxConfiguration]> {
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: 10, 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
@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;
}
})
}.position({ x: 50, y: 130 })
}.margin({ top: 30 })
}
} 示例3：设置文本多选框样式
该示例通过配置 indicatorBuilder 实现选中样式为 Text。
@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%')
}
} 结论
ArkUI 框架中的 Checkbox 组件提供了丰富的功能和灵活的定制性，使得开发者可以轻松实现各种复杂的多选功能。通过本文的介绍，相信读者对 ArkUI 中的 Checkbox 组件有了更深入的了解。希望本文能为开发者在实际项目中使用 Checkbox 组件提供有益的参考和帮助。
----
以上
讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。
更多推荐
25
0- 0
已为社区贡献280条内容
所有评论(0)