HarmonyOS6 ArkTS Checkbox

张

张建站

2026/4/16 8:36:08

10分钟阅读

文章目录组件基础说明核心作用核心属性前置完整代码核心功能与样式详解1. 基础状态管理核心实现代码关键片段关键说明2. 形状定制圆形/圆角方形形状枚举值代码关键片段3. 全维度颜色定制颜色配置项详解自定义配色示例4. 对勾样式精细化调整对勾配置项详解代码关键片段5. 多选项组合多选组核心实现逻辑代码关键片段关键说明总结组件基础说明核心作用Checkbox为多选框组件用于实现单个/多个选项的选中/未选中状态切换支持自定义形状、颜色、对勾样式配合状态变量可实现双向绑定与状态监听是表单、筛选、设置等场景的常用基础组件。核心属性前置核心分类关键属性/方法作用状态控制select(boolean)设置组件初始/当前选中状态状态控制onChange((value:boolean)void)监听选中状态变化返回最新布尔值样式定制shape(CheckBoxShape)设置组件形状支持圆形/圆角方形颜色定制selectedColor(string/Color)设置组件选中时的背景色颜色定制unselectedColor(string/Color)设置组件未选中时的边框色对勾样式mark({strokeColor,strokeWidth,size})自定义对勾的颜色、粗细、尺寸完整代码// 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. 基础圆形CheckboxAPI11默认圆形 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 6API 11中Checkbox支持两种内置形状通过shape(CheckBoxShape)方法配置默认形状为圆形。形状枚举值枚举值形状效果适用场景CheckBoxShape.CIRCLE圆形多选框移动端、穿戴设备等轻量化界面CheckBoxShape.ROUNDED_SQUARE圆角方形多选框智慧屏、平板、表单页面等常规界面代码关键片段// 圆形默认 .shape(CheckBoxShape.CIRCLE) // 圆角方形 .shape(CheckBoxShape.ROUNDED_SQUARE)3. 全维度颜色定制Checkbox支持选中/未选中组件颜色对勾颜色的精细化定制满足不同UI设计风格的需求颜色值支持十六进制#RRGGBB、Color内置常量Color.White等格式。颜色配置项详解配置项作用示例值selectedColor选中时组件的背景色#007DFF鸿蒙蓝、#36D399绿色、Color.RedunselectedColor未选中时组件的边框色#999999深灰色、#CCCCCC浅灰色、Color.Greymark.strokeColor对勾的绘制颜色Color.White、#000000黑色自定义配色示例Checkbox({ name: colorCheckbox }) .select(true) .selectedColor(#36D399) // 绿色选中背景 .unselectedColor(#666666) // 深灰色未选中边框 .mark({ strokeColor: Color.Black, // 黑色对勾 })4. 对勾样式精细化调整通过mark()方法可自定义对勾的粗细与尺寸配合颜色配置实现对勾样式的全定制满足不同界面的视觉比例需求。对勾配置项详解配置项类型作用建议值strokeWidthnumber对勾的线条粗细单位px2-3px适配常规组件尺寸sizenumber对勾的整体尺寸单位px16-18px与Checkbox组件比例匹配代码关键片段.mark({ strokeColor: Color.White, // 对勾颜色 strokeWidth: 2, // 对勾粗细 size: 16 // 对勾大小 })5. 多选项组合多选组通过State定义布尔数组、配合ForEach循环渲染可快速实现独立多选组功能每个选项的状态单独管理适用于筛选、多选项选择等场景。核心实现逻辑定义布尔数组checkList数组长度对应选项数量初始值为false未选中通过ForEach循环遍历数组为每个Checkbox绑定对应索引的数组元素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设置唯一namecheck0/check1/check2便于调试与业务区分。总结版本兼容本文档所有样式与属性均基于API 11HarmonyOS 6低版本需做兼容处理状态管理State为组件内状态跨组件传参可使用Link/Provide/Consume等装饰器颜色规范自定义颜色时建议遵循HarmonyOS设计规范保证不同设备上的显示一致性性能优化多选项如超过10个场景建议使用懒加载避免一次性渲染过多组件影响性能。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力

Keil5链接报错救星：手把手教你读懂‘Program Size’并释放MCU内存

Keil5内存优化实战：从Program Size解析到高效资源管理每次在Keil MDK中点击编译按钮后，控制台输出的那行Program Size信息就像一份神秘账单——Code、RO-data、RW-data、ZI-data四个数字静静排列，却鲜有人真正理解它们揭示的内存使用真相。…...

2026/4/16 8:35:05 阅读更多 →

3个创新方法：彻底解决TranslucentTB任务栏透明工具安装难题

3个创新方法：彻底解决TranslucentTB任务栏透明工具安装难题【免费下载链接】TranslucentTB A lightweight utility that makes the Windows taskbar translucent/transparent. 项目地址: https://gitcode.com/gh_mirrors/tr/TranslucentTB TranslucentTB是一…...

2026/4/16 8:30:25 阅读更多 →

思澈科技solution井字棋游戏【外置应用】

文章目录一、简介参考文档二、应用介绍三、应用开发1、应用文件夹创建2、文件目录结构说明3、配置图片资源3.1 图标放置3.2 应用内游戏资源3.3 图片资源说明4、编写代码文件4.1 主体函数说明on_starton_resumeon_pauseon_stop4.2 on_start 初始化4.3 on_resume 激活配置4.4 on_…...

2026/4/16 8:28:27 阅读更多 →

Snyk 依赖性安全漏洞扫描工具实战指南：从安装到多语言项目扫描

1. Snyk工具与依赖安全漏洞扫描基础第一次听说Snyk是在去年参与一个金融项目时，我们的技术负责人突然要求所有依赖包必须通过安全扫描才能上线。当时团队里没人知道该怎么操作，直到发现了这个神器。Snyk本质上是个"依赖包安检仪"，…...

2026/4/13 13:51:39 阅读更多 →

mbed OS 6+ 嵌入式TFTP服务器设计与实现

1. TFTPServer项目概述TFTPServer 是一个面向 ARM mbed OS 平台的轻量级 TFTP（Trivial File Transfer Protocol）服务器实现，专为嵌入式以太网设备设计。其核心目标是在资源受限的 MCU（如 STM32F4/F7/H7、NXP LPC1768/LPC54608、Re…...

2026/4/13 13:14:19 阅读更多 →

Windows效率神器PowerToys：30+免费工具让你的电脑生产力翻倍

Windows效率神器PowerToys：30免费工具让你的电脑生产力翻倍【免费下载链接】PowerToys Microsoft PowerToys is a collection of utilities that supercharge productivity and customization on Windows 项目地址: https://gitcode.com/GitHub_Trending/po/Powe…...

2026/4/14 3:20:16 阅读更多 →

RX63N驱动SSD1963显示控制器的HAL级配置指南

1. 项目概述Display_shield_config是为 Renesas GR-PEACH 开发板配套的显示扩展板（Display Shield）所设计的一套底层配置资源集合。GR-PEACH 是基于 Renesas RX63N 微控制器的高性能嵌入式开发平台，主频高达 100 MHz，内置 1 MB Fl…...

2026/4/14 4:56:47 阅读更多 →