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.运行结果如下图：

运行结果