事件处理与用户交互

一、实验目的

（1）通过text、button、image、radio、switch等组件实现页面设计

（2）掌握组件的功能和事件函数

（3）掌握arkts语言编写组件代码的方法

二、实验设备与器件

PC机、DevEco Studio工具

三、实验内容

Text 组件：显示文本内容，点击后可改变文本

Button 组件：可点击按钮，点击后改变按钮文本和开关状态

Image 组件：显示图片，需要确保 resources/base/media 目录下有名为 example.png 的图片

Radio 组件：单选按钮组，只能选择其中一个选项

Switch 组件：开关控件，可以切换开/关状态

Checkbox 组件：多选框组，可以同时选择多个选项

确保在resources/base/media目录下放置一个名为example.png的图片文件

如果需要修改图片资源，请更新imageSrc变量的资源引用

所有组件都有交互功能，点击后会更新状态并显示在界面上

// Index.ets
@Entry
@Component
struct MyComponent {
 @State textValue: string = '欢迎使用ArkTS'
 @State buttonText: string = '点击我'
 @State radioValue: string = 'radio1'
 @State switchChecked: boolean = false
 @State checkboxChecked: boolean[] = [false, false, false]
 @State imageSrc: Resource = $r('app.media.example') // 确保resources/base/media下有example.png图片

 build() {
   Column({ space: 20 }) {
     // Text 组件
     Text(this.textValue)
       .fontSize(30)
       .fontWeight(FontWeight.Bold)
       .fontColor(Color.Blue)
       .onClick(() => {
         this.textValue = '文本被点击了!'
       })

     // Button 组件
     Button(this.buttonText)
       .width(200)
       .height(50)
       .backgroundColor(Color.Green)
       .onClick(() => {
         this.buttonText = '按钮被点击了!'
         this.switchChecked = !this.switchChecked
       })

     // Image 组件
     Image(this.imageSrc)
       .width(100)
       .height(100)
       .borderRadius(10)
       .overlay('图片', { align: Alignment.Bottom, offset: { y: 10 } })

     // Radio 组件组
     Text('单选按钮组:').fontSize(18)
     Row({ space: 15 }) {
       Radio({ value: 'radio1', group: 'radioGroup' })
         .checked(this.radioValue === 'radio1')
         .onChange((isChecked: boolean) => {
           if (isChecked) {
             this.radioValue = 'radio1'
           }
         })
       Text('选项1')

       Radio({ value: 'radio2', group: 'radioGroup' })
         .checked(this.radioValue === 'radio2')
         .onChange((isChecked: boolean) => {
           if (isChecked) {
             this.radioValue = 'radio2'
           }
         })
       Text('选项2')
     }

     // Switch 组件
     Row({ space: 15 }) {
       Toggle({type:ToggleType.Switch,isOn:true})
         //.isOn(this.switchChecked)
         .onChange((isOn: boolean) => {
           this.switchChecked = isOn
         })
       Text(`开关状态: ${this.switchChecked ? '开' : '关'}`)
     }

     // Checkbox 组件组
     Text('多选框组:').fontSize(18)
     Column({ space: 10 }) {
       Row({ space: 10 }) {
         Checkbox()
           .select(this.checkboxChecked[0])
           .onChange((isChecked: boolean) => {
             this.checkboxChecked[0] = isChecked
           })
         Text('选项A')
       }
       Row({ space: 10 }) {
         Checkbox()
           .select(this.checkboxChecked[1])
           .onChange((isChecked: boolean) => {
             this.checkboxChecked[1] = isChecked
           })
         Text('选项B')
       }
       Row({ space: 10 }) {
         Checkbox()
           .select(this.checkboxChecked[2])
           .onChange((isChecked: boolean) => {
             this.checkboxChecked[2] = isChecked
           })
         Text('选项C')
       }
     }

     // 显示当前选择状态
     Text(`当前单选值: ${this.radioValue}`)
     Text(`多选状态: A-${this.checkboxChecked[0]}, B-${this.checkboxChecked[1]}, C-${this.checkboxChecked[2]}`)
   }
   .width('100%')
   .height('100%')
   .padding(20)
   .backgroundColor(Color.White)
 }
}