企业官网建设流程全解析

组件基础说明

核心作用

Checkbox为多选框组件，用于实现单个/多个选项的选中/未选中状态切换，支持自定义形状、颜色、对勾样式，配合状态变量可实现双向绑定与状态监听，是表单、筛选、设置等场景的常用基础组件。

核心属性前置

完整代码

// CheckboxFullStyle.ets @Entry @Component struct CheckboxFullStyle { // 双向绑定选中状态 @State isChecked: boolean = false @State checkList: boolean[] = [false, false, false] build() { Column({ space: 20 }) { Text("Checkbox 完整样式示例").fontSize(22).fontWeight(FontWeight.Bold) // 1. 基础圆形Checkbox（API11+默认圆形） Flex({ alignItems: ItemAlign.Center }) { Checkbox({ name: 'circleCheckbox' }) .select(this.isChecked) // 选中状态 .selectedColor('#007DFF') // 选中背景色 .unselectedColor('#999999') // 未选中边框色 .mark({ strokeColor: Color.White, // 对勾颜色 strokeWidth: 2, // 对勾粗细 size: 16 // 对勾大小 }) .shape(CheckBoxShape.CIRCLE) // 圆形 .onChange((value: boolean) => { this.isChecked = value console.info(`圆形Checkbox状态：${value}`) }) Text("基础圆形多选框").fontSize(16) } // 2. 圆角方形Checkbox Flex({ alignItems: ItemAlign.Center }) { Checkbox({ name: 'squareCheckbox' }) .select(false) .selectedColor('#FF4A6E') .unselectedColor('#CCCCCC') .mark({ strokeColor: Color.White, strokeWidth: 2, size: 16 }) .shape(CheckBoxShape.ROUNDED_SQUARE) // 圆角方形 .onChange((value: boolean) => { console.info(`方形Checkbox状态：${value}`) }) Text("圆角方形多选框").fontSize(16) } // 3. 自定义颜色组合 Flex({ alignItems: ItemAlign.Center }) { Checkbox({ name: 'colorCheckbox' }) .select(true) .selectedColor('#36D399') // 绿色选中 .unselectedColor('#666666') .mark({ strokeColor: Color.Black, // 黑色对勾 strokeWidth: 3, size: 18 }) .shape(CheckBoxShape.CIRCLE) Text("自定义配色多选框").fontSize(16) } // 4. 多选组示例 Text("多选组（独立选择）").fontSize(18).fontWeight(FontWeight.Medium) Flex({ wrap: FlexWrap.Wrap }) { ForEach([0, 1, 2], (index: number) => { Flex({ alignItems: ItemAlign.Center }) { Checkbox({ name: `check${index}` }) .select(this.checkList[index]) .selectedColor('#007DFF') .unselectedColor('#999') .mark({ strokeColor: Color.White }) .onChange((value: boolean) => { this.checkList[index] = value console.info(`选项${index}：${value}`) }) Text(`选项 ${index + 1}`) } }) } // 5. 显示当前状态 Text(`当前状态：${this.isChecked ? '已选中' : '未选中'}`) .fontSize(16) .fontColor(this.isChecked ? '#007DFF' : '#666666') .margin(10) } .padding(20) .width('100%') .height('100%') .backgroundColor('#F5F5F5') } }

运行效果如图：

核心功能与样式详解

1. 基础状态管理

核心实现

通过@State装饰器定义布尔类型状态变量，配合select()方法实现选中状态双向绑定，通过onChange()方法监听状态变化并更新变量/执行业务逻辑。

代码关键片段

@State isChecked: boolean = false // 绑定状态 Checkbox({ name: 'circleCheckbox' }) .select(this.isChecked) .onChange((value: boolean) => { this.isChecked = value // 更新状态变量 console.info(`圆形Checkbox状态：${value}`) }) // 状态展示 Text(`当前状态：${this.isChecked ? '已选中' : '未选中'}`) .fontColor(this.isChecked ? '#007DFF' : '#666666')

关键说明

• name为Checkbox唯一标识，多组件场景建议设置不同名称，便于调试与业务区分；
• onChange回调返回的value为最新选中状态（true=选中，false=未选中），可在此实现日志打印、数据提交等业务逻辑。

2. 形状定制（圆形/圆角方形）

HarmonyOS 6（API 11+）中Checkbox支持两种内置形状，通过shape(CheckBoxShape)方法配置，默认形状为圆形。

形状枚举值

代码关键片段

// 圆形（默认） .shape(CheckBoxShape.CIRCLE) // 圆角方形 .shape(CheckBoxShape.ROUNDED_SQUARE)

3. 全维度颜色定制

Checkbox支持选中/未选中组件颜色+对勾颜色的精细化定制，满足不同UI设计风格的需求，颜色值支持十六进制（#RRGGBB）、Color内置常量（Color.White）等格式。

颜色配置项详解

自定义配色示例

Checkbox({ name: 'colorCheckbox' }) .select(true) .selectedColor('#36D399') // 绿色选中背景 .unselectedColor('#666666') // 深灰色未选中边框 .mark({ strokeColor: Color.Black, // 黑色对勾 })

4. 对勾样式精细化调整

通过mark()方法可自定义对勾的粗细与尺寸，配合颜色配置实现对勾样式的全定制，满足不同界面的视觉比例需求。

对勾配置项详解

代码关键片段

.mark({ strokeColor: Color.White, // 对勾颜色 strokeWidth: 2, // 对勾粗细 size: 16 // 对勾大小 })

5. 多选项组合（多选组）

通过@State定义布尔数组、配合ForEach循环渲染，可快速实现独立多选组功能，每个选项的状态单独管理，适用于筛选、多选项选择等场景。

核心实现逻辑

1. 定义布尔数组checkList，数组长度对应选项数量，初始值为false（未选中）；
2. 通过ForEach循环遍历数组，为每个Checkbox绑定对应索引的数组元素；
3. onChange回调中更新对应索引的数组值，实现单个选项状态独立管理。

代码关键片段

@State checkList: boolean[] = [false, false, false] // 3个选项的状态数组 Flex({ wrap: FlexWrap.Wrap }) { ForEach([0, 1, 2], (index: number) => { // 遍历索引 Flex({ alignItems: ItemAlign.Center }) { Checkbox({ name: `check${index}` }) .select(this.checkList[index]) // 绑定对应索引的状态 .onChange((value: boolean) => { this.checkList[index] = value // 更新对应索引的状态 console.info(`选项${index}：${value}`) }) Text(`选项 ${index + 1}`) } }) }

关键说明

• 使用Flex({ wrap: FlexWrap.Wrap })实现选项自动换行，适配不同屏幕宽度；
• 为每个Checkbox设置唯一name（check0/check1/check2），便于调试与业务区分。

总结

1. 版本兼容：本文档所有样式与属性均基于API 11+（HarmonyOS 6），低版本需做兼容处理；
2. 状态管理：@State为组件内状态，跨组件传参可使用@Link/@Provide/@Consume等装饰器；
3. 颜色规范：自定义颜色时建议遵循HarmonyOS设计规范，保证不同设备上的显示一致性；
4. 性能优化：多选项（如超过10个）场景建议使用懒加载，避免一次性渲染过多组件影响性能。

如果这篇文章对你有帮助，欢迎点赞、收藏、关注，你的支持是持续创作的动力