鸿蒙HarmonyOS NEXT开发：CheckboxGroup（基础组件）

最新推荐文章于 2024-09-12 16:22:23 发布
最新推荐文章于 2024-09-12 16:22:23 发布
阅读量947 收藏 17
点赞数 29
分类专栏： ArkTS 鸿蒙 文章标签： harmonyos 华为 android 驱动开发 鸿蒙
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shudaoshanbbq/article/details/141196980
版权
鸿蒙 同时被 2 个专栏收录
99 篇文章 0 订阅
订阅专栏
ArkTS
94 篇文章 0 订阅
订阅专栏

CheckboxGroup

多选框群组，用于控制多选框全选或者不全选状态。

说明：

该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

无

接口

CheckboxGroup(options?: CheckboxGroupOptions)

创建多选框群组，可以控制群组内的Checkbox全选或者不全选，group值相同的Checkbox和CheckboxGroup为同一群组。

在结合带缓存组件使用时(如List)，未被创建的Checkbox选中状态需要应用手动控制。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填描述
optionsCheckboxGroupOptions否配置多选框群组参数。

CheckboxGroupOptions对象说明

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

名称类型必填说明
groupstring否群组名称。
说明：
多个相同群组名称的CheckboxGroup，仅第一个CheckboxGroup生效。

属性

除支持通用属性外，还支持以下属性：

selectAll

selectAll(value: boolean)

设置是否全选。若同组的Checkbox显式设置了select属性，则Checkbox的优先级高。

从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 version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueResourceColor是非选中状态边框颜色。
默认值：‘#33ffffff’。

mark10+

mark(value: MarkStyle)

设置多选框内部图标样式。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueMarkStyle是多选框内部图标样式。

checkboxShape12

checkboxShape(value: CheckBoxShape)

设置CheckboxGroup组件形状， 包括圆形和圆角方形。

卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueCheckBoxShape是设置CheckboxGroup组件形状， 包括圆形和圆角方形。
默认值:CheckBoxShape.CIRCLE。
说明：
CheckboxGroup组件形状按照设置显示。
CheckboxGroup内所有没有单独设置shape类型的Checkbox形状和CheckboxGroup的保持一致。
CheckboxGroup内有单独设置shape类型的Checkbox形状则优先于CheckboxGroup，按照设置形状显示。

事件

除支持通用事件外，还支持以下事件：

onChange

onChange(callback: (event: CheckboxGroupResult) => void )

CheckboxGroup的选中状态或群组内的Checkbox的选中状态发生变化时，触发回调。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
eventCheckboxGroupResult是多选框群组的信息。

CheckboxGroupResult对象说明

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

名称类型描述
nameArray<string>群组内所有被选中的多选框名称。
statusSelectStatus选中状态。

SelectStatus枚举说明

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

名称描述
All群组多选择框全部选择。
Part群组多选择框部分选择。
None群组多选择框全部没有选择。

MarkStyle10+对象说明

名称类型必填默认值描述
strokeColorResourceColor否Color.White内部图标颜色。
sizeLength否-内部图标大小，单位vp。默认大小与多选框群组组件宽度设置值一致。
不支持百分比形式设置。当设置为非法值时，按照默认值处理。
strokeWidthLength否2内部图标粗细，单位vp。不支持百分比形式设置。当设置为非法值时，按照默认值处理。

示例

示例1

// xxx.ets
@Entry
@Component
struct CheckboxExample {
  build() {
    Scroll() {
      Column() {
        // 全选按钮
        Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
          CheckboxGroup({ group: 'checkboxGroup' })
            .checkboxShape(CheckBoxShape.ROUNDED_SQUARE)
            .selectedColor('#007DFF')
            .onChange((itemName: CheckboxGroupResult) => {
              console.info("checkbox group content" + JSON.stringify(itemName))
            })
          Text('Select All').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500)
        }

        // 选项1
        Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
          Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
            .selectedColor('#007DFF')
            .shape(CheckBoxShape.ROUNDED_SQUARE)
            .onChange((value: boolean) => {
              console.info('Checkbox1 change is' + value)
            })
          Text('Checkbox1').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500)
        }.margin({ left: 36 })

        // 选项2
        Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
          Checkbox({ name: 'checkbox2', group: 'checkboxGroup' })
            .selectedColor('#007DFF')
            .shape(CheckBoxShape.ROUNDED_SQUARE)
            .onChange((value: boolean) => {
              console.info('Checkbox2 change is' + value)
            })
          Text('Checkbox2').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500)
        }.margin({ left: 36 })

        // 选项3
        Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
          Checkbox({ name: 'checkbox3', group: 'checkboxGroup' })
            .selectedColor('#007DFF')
            .shape(CheckBoxShape.ROUNDED_SQUARE)
            .onChange((value: boolean) => {
              console.info('Checkbox3 change is' + value)
            })
          Text('Checkbox3').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500)
        }.margin({ left: 36 })
      }
    }
  }
}
ts

示例2

// xxx.ets
@Entry
@Component
struct Index {

  build() {
    Row() {
      Column() {
        Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
          CheckboxGroup({ group: 'checkboxGroup' })
            .checkboxShape(CheckBoxShape.ROUNDED_SQUARE)
            .selectedColor(Color.Orange)
            .onChange((itemName: CheckboxGroupResult) => {
              console.info("checkbox group content" + JSON.stringify(itemName))
            })
            .mark({
              strokeColor:Color.Black,
              size: 40,
              strokeWidth: 5
            })
            .unselectedColor(Color.Red)
            .width(30)
            .height(30)
          Text('Select All').fontSize(20)
        }.margin({right:15})
        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)
        }
        Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
          Checkbox({ name: 'checkbox3', group: 'checkboxGroup' })
            .selectedColor(0x39a2db)
            .shape(CheckBoxShape.ROUNDED_SQUARE)
            .onChange((value: boolean) => {
              console.info('Checkbox3 change is' + value)
            })
            .width(30)
            .height(30)
          Text('Checkbox3').fontSize(20)
        }
      }
      .width('100%')
    }
    .height('100%')
  }
}
ts

「已注销」
关注
专栏目录
HarmonyOS鸿蒙基于Java开发:Java UI 常用组件 Checkbox
sybh的博客
01-13 869
Checkbox可以实现选中和取消选中的功能。marked当前状态（选中或未选中） boolean类型可以直接设置true/false，也可以引用boolean资源。true则当前状态为选中false则当前状态为未选中。ohos:marked="true" ohos:marked="$boolean:true"
鸿蒙OS应用开发之多选按钮
大坡3D软件开发
12-20 807
前面学习了复选按钮，可以给用户自行地选择各个选项，并且也可以不选，这是比较合理的。比如后面有10多项选项，一开始是默认全选，当用户只要其中一项时，就需要把所有已经选上的选项一项一项地去掉，这是很麻烦的，是考验人性的。在这里第一项是全选，或者全部不选，第二级是复选，用户可以一个一个地选择，也可以一个一个地不选。这样当用户点击这个按钮时，就会把这个组名里所有复选按钮全部选中，如果取消时，就会把所有选中按钮取消选中状态。要实现这种界面，需要使用前面学习的复选按钮，再加上一个多选按钮，才能实现。
鸿蒙入门09-CheckBox组件
qq_42660453的博客
04-19 372
参数形式 ： Checkbox( options?: string } )当 value 的值为 false 时，表示未选中。当 value 的值为 true 时，表示已选中。可以添加事件，当选中状态改变的时候会触发。当选中状态发生变化时，触发回调函数。设置多选框选中状态时的颜色。设置多选框是否被选中。
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之CheckboxGroup组件
zy0412326的专栏
01-28 1070
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之CheckboxGroup组件。
鸿蒙5.0版开发：ArkTS组件-基础组件（CheckboxGroup）
最新发布
m0_69424697的博客
09-12 776
多选框群组，用于控制多选框全选或者不全选状态。
如何使用命令行对RK开发板进行OpenHarmony版本烧录？
m0_64420071的博客
03-29 1626
开发版烧录
鸿蒙入门10-CheckBoxGroup组件
qq_42660453的博客
04-22 789
复选框群组用于控制多个复选框全选或者不全选状态。
HarmonyOS应用开发-UI组件性能优化实例详解
HarmonyOS_002的博客
07-05 1132
图2 自定义组件生命周期流程图如上图所示，自定义组件创建完成之后，在build函数执行之前，将先执行aboutToAppear()生命周期回调函数。此时若在该函数中执行耗时操作，将阻塞UI渲染，增加UI主线程负担。因此，应尽量避免在自定义组件的生命周期内执行高耗时操作。对于复杂计算的耗时场景，可以将计算结果进行缓存处理。对于不需要等待结果的高耗时任务，可以采用多线程处理该任务，通过并发的方式避免主线程阻塞。
2024年鸿蒙最新HarmonyOS Next 使用绘制组件实现自定义进度动画(1)，2024年最新鸿蒙面试题目 非笔试
2401_84862061的博客
05-15 398
|—PaintComponent.ets // 视图层-绘制组件页面。paintcomponent // har类型。| |—Constants.ets // 常量类。// TODO:知识点:使用Path组件绘制封闭曲线，实现水位线效果。
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：CheckboxGroup）
m0_64420071的博客
03-07 1185
ArkTS声明式开发（基础手势：CheckboxGroup）
HarmonyOS鸿蒙开发指南:基础组件 input开发指导
sybh的博客
01-09 1121
仅当Input类型为checkbox和radio时，当前组件是否选中的属性checked才生效，默认值为false。该方法在Input类型为text、email、date、time、number和password时生效。通过设置type属性来定义Input类型，如将Input设置为button、date等。在pages/index目录下的hml文件中创建一个Input组件。通过对Input组件添加showError方法来提示输入的错误原因。根据场景选择不同类型的Input输入框，完成信息录入。
HarmonyOS鸿蒙开发指南:容器组件 form开发指导
sybh的博客
01-08 949
创建input组件，分别设置type属性为checkbox（多选框）和radio（单选框），再使用Form组件的onsubmit和onreset事件实现表单数据的提交与重置。为Form组件添加click-effect属性，实现点击表单后的缩放效果，click-effect枚举值请参考通用属性。通过为Form添加background-color和border属性，来设置表单的背景颜色和边框。为Form组件添加submit和reset事件，来提交表单内容或重置表单选项。
HarmonyOS开发36：Checkbox多选框基本用法
GeniusAng的博客
08-11 481
同上篇文章讲到的一样，本篇文章也需要用到面写的吐司弹框 ability_main.xml代码： <?xml version="1.0" encoding="utf-8"?> <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:alignment="center"
鸿蒙NEXT-Column&Row组件的使用
2301_76813281的博客
01-18 1248
一个丰富的页面需要很多组件组成，那么，我们如何才能让这些组件有条不紊地在页面上布局呢？这就需要借助容器组件来实现。容器组件是一种比较特殊的组件，它可以包含其他的组件，而且按照一定的规律布局，帮助开发者生成精美的页面。容器组件除了放置基础组件外，也可以放置容器组件，通过多层布局的嵌套，可以布局出更丰富的页面。ArkTS为我们提供了丰富的容器组件来布局页面，本文将以构建登录页面为例，介绍Column和Row组件的属性与使用。
HarmonyOS_Next 鸿蒙组件-数据双向绑定
Ja_dream的博客
07-17 1434
笔者是做前端的，在学习鸿蒙的时候，一直好奇能不能像vue一样，做到数据双向绑定，实现像vue的MvvM一样，数据和视图双向同步。即实现：数据变化-视图更新，视图更新-数据更新数据绑定可分为单向数据绑定和双向数据绑定。指的是对象实例的数据更新会引起界面元素的更新，反之不行；指的是对象实例的数据更新会引起界面元素的数据更新，界面元素的数据更新也会引起对象实例的数据更新。因为像这种通过事件来同步数据的办法，太繁琐了然后就在官方文档中，找到了这个。
第九节HarmonyOS 常用基础组件19-CheckboxGroup
yyxhzdm的博客
01-30 842
onChange(callback:(event: CherckboxGroupResult) => void) CheckboxGroup的选中状态或者群组内的Checkbox的选中状态发生变化时，触发该回调。selectAll - boolean - 设置是否全选，默认值：false，若同组的Checkbox显示设置了select，则Checkbox的优先级高。name - Array - 群组内多有被选中的多选框名称。多选框群组，用于控制多个选框全选或者全不选状态。
初始化checkboxgroup值
ahb0293的博客
09-21 330
1Ext.override(Ext.form.CheckboxGroup,{23setValueForItem:function(val){//多个选项值以逗号分开的4val=","+val+","5this.items.each(function(item){6if(va...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值