scrapy splash教程(1.2基本组件ArkTS-BlankToggleCheckBox)

一.学习目标:

1.学习Blank、Toggle和CheckBox三个组件的基本使用方法;

2.了解行布局Row与列布局Column的混合使用;

3.了解提示框ShowToast使用方法。

二.任务:

实现Toggle状态与Text内容的绑定,Checkbox状态的ShowToast显示。

三.实现过程:

1.创建HelloWorld工程见:

使用ArkTS语言开发(Stage模型)-快速入门-入门-HarmonyOS应用开发

https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/start-with-ets-stage-0000001380281110-V3

2.修改Index.ets代码如下:

import prompt from '@ohos.prompt'; @Entry @Component struct BasicControl { @State open:boolean=false build() { Column() {//列布局 Row() {//行布局 Text(this.open?'Wifi打开':'Wifi关闭').fontSize(30) Blank(50) Toggle({ type: ToggleType.Switch , isOn: this.open}).width(100).height(30) .onChange((isOn: boolean) => { this.open=isOn }) }.width('100%').backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 }) // 全选按钮 CheckboxGroup({ group: 'checkboxGroup' })//下面两个Checkbox为同一组,可单选可全选 .selectedColor(0xed6f21).width(30).height(30) .onChange((itemName: CheckboxGroupResult) => { prompt.showToast({ message: '选择了' itemName, duration: 5000 }); }) Checkbox({ name: '选择框1', group: 'checkboxGroup' })//单选按钮1 .select(true).width(30).height(30) .selectedColor(0xed6f21) .onChange((value: boolean) => { prompt.showToast({ message: '选择框1为' value, duration: 5000 }); }) Checkbox({ name: '选择框2', group: 'checkboxGroup' })//单选按钮2 .select(false).width(30).height(30) .selectedColor(0x39a2db) .onChange((value: boolean) => { prompt.showToast({ message: '选择框2为' value, duration: 5000 }); }) }.backgroundColor(0xEFEFEF).padding(20) } }

3.运行结果如下图:

scrapy splash教程(1.2基本组件ArkTS-BlankToggleCheckBox)(1)

运行结果

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页