HarmonyOS鸿蒙学习笔记(7)实现复选框功能CheckBox和Toggle的简单使用

HarmonyOS提供了两个组件可以实现复选框的功能:Checkbox和Toggle

@Entry@Componentstruct CheckBoxPage { build() { Column() { Row(){ Checkbox({name: ‘checkbox1‘, group: ‘checkboxGroup‘}) .select(true)//默认选中 .selectedColor(Color.Red)//选中颜色 .onChange((value: boolean) => { console.info(‘Checkbox1 change is‘+ value) }) Text(“Checkbox效果“).fontSize(25).fontColor(Color.Red) } Row(){ Toggle({ type: ToggleType.Checkbox, isOn: true }) .selectedColor(Color.Blue) .onChange((isOn: boolean) => { console.info(‘Component status:‘ + isOn) }) Text(“Toggle 效果“).fontSize(25).fontColor(Color.Blue) } } .margin({left:30}) .height(‘100%‘) .width(‘100%‘) .alignItems(HorizontalAlign.Start) .justifyContent(FlexAlign.Center) }}

UI效果如下图: HarmonyOS鸿蒙学习笔记(7)实现复选框功能CheckBox和Toggle的简单使用

从效果来看Checkbox和Toggle的区别不大,只不过Checkbox可以结合CheckboxGroup组件实现全选效果,如下图: HarmonyOS鸿蒙学习笔记(7)实现复选框功能CheckBox和Toggle的简单使用 而Toggle功能比较丰富,可以实现Checkbox,Button,和Switch效果,如下图所示: HarmonyOS鸿蒙学习笔记(7)实现复选框功能CheckBox和Toggle的简单使用 参考资料: 1、Checkbox官方说明 2、Toggle官方说明 3、CheckboxGroup官方说明

极客网企业会员

免责声明:本网站内容主要来自原创、合作伙伴供稿和第三方自媒体作者投稿,凡在本网站出现的信息,均仅供参考。本网站将尽力确保所提供信息的准确性及可靠性,但不保证有关资料的准确性及可靠性,读者在使用前请进一步核实,并对任何自主决定的行为负责。本网站对有关资料所引致的错误、不确或遗漏,概不负任何法律责任。任何单位或个人认为本网站中的网页或链接内容可能涉嫌侵犯其知识产权或存在不实内容时,应及时向本网站提出书面权利通知或不实情况说明,并提供身份证明、权属证明及详细侵权或不实情况证明。本网站在收到上述法律文件后,将会依法尽快联系相关文章源头核实,沟通删除相关内容或断开相关链接。