鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：CheckboxGroup）

news/2024/7/21 11:29:31 标签: harmonyos, 华为, android, 鸿蒙, 鸿蒙系统, ArkTS, ArkUI

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

说明：

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

子组件

无

接口

CheckboxGroup(options?: CheckboxGroupOptions)

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

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

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

参数：

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

CheckboxGroupOptions对象说明

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

属性

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

名称参数类型描述
selectAllboolean设置是否全选。
默认值：false，若同组的Checkbox设置了select属性，则Checkbox的优先级高。
从API version 9开始，该接口支持在ArkTS卡片中使用。
说明：
若同组的Checkbox显式设置了select属性，则Checkbox的优先级高。
从API version 10开始，该属性支持$$双向绑定变量。
selectedColorResourceColor设置被选中或部分选中状态的颜色。
说明：
默认值：$r('sys.color.ohos_id_color_text_primary_activated')。
异常值按照默认值处理。
从API version 9开始，该接口支持在ArkTS卡片中使用。
unselectedColor10+ResourceColor设置非选中状态边框颜色。
mark10+MarkStyle多选框内部图标样式。

事件

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

名称功能描述
onChange (callback: (event: CheckboxGroupResult) => void )CheckboxGroup的选中状态或群组内的Checkbox的选中状态发生变化时，触发回调。
从API version 9开始，该接口支持在ArkTS卡片中使用。

CheckboxGroupResult对象说明

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

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

SelectStatus枚举说明

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

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

MarkStyle10+对象说明

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

示例

示例1

// xxx.ets
@Entry
@Component
struct CheckboxExample {
  build() {
    Scroll() {
      Column() {
        // 全选按钮
        Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
          CheckboxGroup({ group: 'checkboxGroup' })
            .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 })
      }
    }
  }
}

checkboxGroup

示例2

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

  build() {
    Row() {
      Column() {
        Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
          CheckboxGroup({ group: 'checkboxGroup' })
            .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%')
  }
}

checkboxGroup

最后，有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（Harmony NEXT）资料用来跟着学习是非常有必要的。 

这份鸿蒙（Harmony NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

 获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（Harmony NEXT）最新学习路线

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。 


http://www.niftyadmin.cn/n/5413287.html

相关文章

Ruby CanCanCan 动态定义方法

Ruby CanCanCan 动态定义方法

灵感来自这里https://github.com/kristianmandrup/cantango/wiki/CanCan-vs-CanTango 如果权限不多&#xff0c;我们可以通过这种方式来定义 class CanCan::Abilitydef initialize user, options {}if !usercan :read, :allendif useradmin_rules if user.roles.include? :…
阅读更多...
进阶数据结构与算法模板 机试与竞赛

进阶数据结构与算法模板 机试与竞赛

1. STL 1.1 priority_queue 1.2 unordered 1.3 stringstream 1.4 algorithm 1.5 bitset 1.5 cin&cout // 优化输入输出 ios::sync_with_stdio(false); cin.tie(0); cout.tie(0);2. 进阶数据结构 2.1 并查集 2.2 字典树/前缀树&#xff08;Trie&#xff09; 2.3 网…
阅读更多...
【conda】实现conda环境迁移的4种方式

【conda】实现conda环境迁移的4种方式

文章目录 方案1: 使用conda pack制作压缩包并在目标环境解压使用方案2: 使用package列表文件重新创建conda环境方案3: scp将环境文件夹拷贝到目标主机上方案4: 通过--clone先克隆一个环境再conda pack打包迁移 方案1: 使用conda pack制作压缩包并在目标环境解压使用 适合离线环…
阅读更多...
2024宠物行业未来发展趋势：京东宠物健康（宠物营养保健和医疗）市场品类数据分析报告

2024宠物行业未来发展趋势：京东宠物健康（宠物营养保健和医疗）市场品类数据分析报告

近段时间&#xff0c;广州某知名宠物医院的医疗事故正在被大众热议&#xff0c;也让越来越多从业者开始关心宠物医疗行业的未来形势。 在2022年下半年&#xff0c;京东平台专门设立了一个一级大类目&#xff1a;宠物健康&#xff08;将其从原本的宠物生活类目中独立出来&#…
阅读更多...
企业微信HOOK协议，新设备二次验证处理

企业微信HOOK协议，新设备二次验证处理

提示设备强制二次验证问题已处理 HOOK&#xff1a;https://www.showdoc.com.cn/1663062930779972/7859611259700402密码&#xff1a;999999999
阅读更多...
链表|707.设计链表

链表|707.设计链表

力扣题目链接 typedef struct MyLinkedList {int val;struct MyLinkedList* next; }MyLinkedList;/** Initialize your data structure here. */MyLinkedList* myLinkedListCreate() {//这个题必须用虚拟头指针,参数都是一级指针,头节点确定后没法改指向了!!!MyLinkedList* he…
阅读更多...
将父目录设置为根目录

将父目录设置为根目录

在用这个这个项目的时候https://github.com/KaiyangZhou/deep-person-reid&#xff0c; 出现了问题 原因是执行python scripts/main.py找不到模块 ModuleNotFoundError: No module named torchreid原因是根目录在当前目录 C:\\Users\\seama\\Documents\\Workspace\\deep-per…
阅读更多...
动态内存经典笔试题分析

动态内存经典笔试题分析

题目1&#xff1a; void GetMemory(char *p) { *p (char *)malloc(100); } void Test(void) { char *str NULL; GetMemory(str); strcpy(str, "hello world"); 对NULL指针解引用操作符程序崩溃。 printf(str); } 请问运行Test函数会有什么样的后果&#xff1f; G…
阅读更多...
最新文章

Copyright @ 2022~2023