Checkbox
提供多选框组件,通常用于某选项的打开或关闭。
说明:
开发前请熟悉鸿蒙开发指导文档 :[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md
]
该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
子组件
无
接口
Checkbox(options?: {name?: string, group?: string })
从API version 9开始,该接口支持在ArkTS卡片中使用。
参数:
参数名 | 参数类型 | 必填 | 参数描述 |
---|---|---|---|
name | string | 否 | 多选框名称。 |
group | string | 否 | 多选框的群组名称。**说明:**未配合使用CheckboxGroup组件时,此值无用。 |
属性
除支持[通用属性]外,还支持以下属性:
名称 | 参数类型 | 描述 |
---|---|---|
select | boolean | 设置多选框是否选中。 默认值:false 从API version 9开始,该接口支持在ArkTS卡片中使用。 从API version 10开始,该属性支持[$$]双向绑定变量。 |
selectedColor | [ResourceColor] | 设置多选框选中状态颜色。 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
unselectedColor10+ | [ResourceColor] | 设置多选框非选中状态边框颜色。 |
mark10+ | [MarkStyle] | 多选框内部图标样式。 |
事件
支持[通用事件]外,还支持以下事件:
名称 | 功能描述 |
---|---|
onChange(callback: (value: boolean) => void) | 当选中状态发生变化时,触发该回调。 - value为true时,表示已选中。 - value为false时,表示未选中。 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
MarkStyle10+对象说明
名称 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
strokeColor | [ResourceColor] | 否 | Color.White | 内部图标颜色。 |
size | number | string | 否 | - |
strokeWidth | number | stringHarmonyOS与OpenHarmony鸿蒙文档籽料:mau123789是v直接拿 | 否 | 2 |
示例
示例1
// xxx.ets
@Entry
@Component
struct CheckboxExample {
build() {
Row() {
Checkbox({name: 'checkbox1', group: 'checkboxGroup'})
.select(true)
.selectedColor(0xed6f21)
.onChange((value: boolean) = > {
console.info('Checkbox1 change is'+ value)
})
Checkbox({name: 'checkbox2', group: 'checkboxGroup'})
.select(false)
.selectedColor(0x39a2db)
.onChange((value: boolean) = > {
console.info('Checkbox2 change is'+ value)
})
}
}
}
示例2
// xxx.ets
@Entry
@Component
struct Index {
build() {
Row() {
Column() {
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
.selectedColor(0x39a2db)
.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)
.onChange((value: boolean) = > {
console.info('Checkbox2 change is' + value)
})
.width(30)
.height(30)
Text('Checkbox2').fontSize(20)
}
}
.width('100%')
}
.height('100%')
}
}
审核编辑 黄宇
声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。
举报投诉
-
组件
+关注
关注
1文章
422浏览量
17661 -
checkbox
+关注
关注
0文章
3浏览量
1074 -
鸿蒙
+关注
关注
55文章
2090浏览量
42261
发布评论请先 登录
相关推荐
鸿蒙ArkTS的起源和简介
1、引言
Mozilla创造了JS,Microsoft创建了TS,Huawei进一步推出了ArkTS。
从最初的基础的逻辑交互能力,到具备类型系统的高效工程开发能力,再到融合声明式UI、多维状态管理
发表于 01-16 16:23
HarmonyOS/OpenHarmony应用开发-ArkTS的声明式开发范式
轨迹。状态与数据管理状态数据管理作为基于ArkTS的声明式开发范式的特色,通过功能不同的装饰器给开发者提供了清晰的页面更新渲染流程和管道。状态管理包括UI组件状态和应用程序状态,两者协
发表于 01-17 15:09
HarmonyOS/OpenHarmony应用开发-声明式开发范式组件汇总
组件是构建页面的核心,每个组件通过对数据和方法的简单封装,实现独立的可视、可交互功能单元。组件之间相互独立,随取随用,也可以在需求相同的地方重复使用。声明
发表于 01-19 11:14
鸿蒙开发之ArkTS基础知识
一、ArkTS简介 ArkTS是HarmonyOS优选的主力应用开发语言。它在TypeScript(简称TS)的基础上,匹配了鸿蒙的ArkUI框架,扩展了声明式UI、状态管理等相应的能
鸿蒙ArkTS声明式组件:PatternLock
图案密码锁组件,以九宫格图案的方式输入密码,用于密码验证场景。手指在PatternLock组件区域按下时开始进入输入状态,手指离开屏幕时结束输入状态完成密码输入。
评论