一.学习目标：
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.运行结果如下图：
运行结果
,
