鸿蒙 ArkUI 交互选择组件与 @State 状态管理实训博客

小田不甜...

261人浏览 · 2026-06-25 09:31:51

小田不甜... · 2026-06-25 09:31:51 发布

一、实训概述

本次实训重点学习Toggle 开关组件、Radio 单选框组件以及@State响应式状态管理，完成开关交互、禁用控件、单选表单、状态切换、数值计数器五组交互案例，掌握表单选择、页面数据联动刷新开发逻辑。

二、案例 1：多类型开关交互 Toggle1

完整代码

ets

import { FailureCode } from '@kit.AbilityKit'
@Entry
@Component
struct Toggle1{
  @State isOpen:boolean = true
  build() {
    Column(){
      Toggle({
        type:ToggleType.Checkbox,
        isOn:false
      })
        .width(50)
      Toggle({
        type:ToggleType.Switch,
        isOn:this.isOpen
      })
        .width(150)
        .height(50)
        .selectedColor(Color.Red)
        .onChange((calue:boolean)=>{
          this.isOpen = !this.isOpen
        })
      Text(this.isOpen?"开关已打开":"开关已关闭")
        .fontColor(this.isOpen?Color.Red:Color.Green)
        .fontSize(20)
    }
    .width('100%')
    .height('100%')
  }
}

功能说明

展示 Checkbox 复选框、Switch 滑动开关两种 Toggle 类型；绑定@State变量，滑动开关时同步修改文本内容与文字颜色，实现界面联动刷新。

三、案例 2：禁用不可点击开关 Toggle2

完整代码

ets

@Entry
@Component
struct Toggle2{
  build() {
    Column(){
      Text("禁用状态开关（不可点击）")
        .fontSize(20)
      Toggle({
        type:ToggleType.Switch,
        isOn:true
      })
        .width(50)
        .height(28)
        .enabled(false)
    }
    .width('100%')
    .height('100%')
    .padding(30)
  }
}

功能说明

通过enabled(false)属性设置控件为禁用状态，开关仅展示样式，无法接收点击操作。

四、案例 3：个人信息单选表单 RadioDemo

完整代码

ets

@Entry
@Component
struct RadioDemo{
  build() {
    Column(){
      Text('填写个人信息')
        .fontSize(45)
      Row() {
        Text('姓名:')
          .fontSize(20)
        TextInput({ placeholder: "请输入姓名" })
          .width(240)
          .height(60)
          .backgroundColor(0xf5f5f5)
          .fontSize(40)
          .borderRadius(10)
      }
      Row(){
        Text('性别:         ')
          .fontSize(20)
        Radio({value:'boy',group:'sex'})
          .height(30)
          .width(30)
          .checked(true)
        Text('男       ')
          .fontSize(16)
          .margin({right:50})
        Radio({value:'gril',group:'sex'})
          .height(30)
          .width(30)
        Text('女')
          .fontSize(16)
      }
      Row() {
        Text('年龄:')
          .fontSize(20)
        TextInput({ placeholder: "请输入年龄" })
          .width(240)
          .height(60)
          .backgroundColor(0xf5f5f5)
          .fontSize(40)
          .borderRadius(10)
      }
      Column() {
        Row() {
          Text('学历:          ')
            .fontSize(20)
          Radio({ value: 'boy', group: 'sex' })
            .height(30)
            .width(30)
            .checked(true)
          Text(' 本科 ')
            .fontSize(16)
            .margin({ right: 30 })
          Radio({ value: 'gril', group: 'sex' })
            .height(30)
            .width(30)
          Text('专科')
            .fontSize(16)
        }
      }
      Button('提交')
        .width('180')
        .height('50')
        .fontSize(26)
        .backgroundImage($r('app.media.background'))
        .borderRadius(8)
    }
    .width('100%')
    .height('100%')
  }
}

功能说明

使用Radio单选组件，相同group分组实现互斥单选；搭配文本输入框完成姓名、年龄录入，性别、学历单项选择，底部提交按钮完成表单布局。

五、案例 4：@State 状态切换 StatesDemo

完整代码

ets

@Entry
@Component
struct StatesDemo{
  private num1:number = 0
  @State num2:number = 0
  @State isShow:boolean = false
  build() {
    Column({space:40}){
      Text(this.isShow?"状态已开启":"状态已关闭")
        .fontSize(26)
        .fontWeight(FontWeight.Bold)
        .fontColor(this.isShow?Color.Red:Color.Green)
      Button('点击切换状态')
        .width('90%')
        .height(50)
        .borderRadius(12)
        .fontSize(26)
        .onClick(()=>{
          this.isShow = !this.isShow
        })
    }.width('100%')
     .height('100%')
  }
}

功能说明

对比普通变量与@State装饰变量；点击按钮修改布尔状态，页面文字、字体颜色同步刷新，直观体现响应式数据绑定特性。

六、案例 5：数值加减计数器 StatesDemo2

完整代码

ets

@Entry
@Component
struct StatesDemo2{
  @State count:number = 0
  build() {
    Column({space:20}){
      Text(`${this.count}`)
        .fontSize(50)
        .fontWeight(FontWeight.Bolder)
      Row({space:15}){
        Button("递加+")
          .width('45%')
          .height(50)
          .fontSize(22)
          .onClick(() => {
            if (this.count<10) {
              this.count++
            }
          })
        Button("递减-")
          .width('45%')
          .height(50)
          .fontSize(22)
          .onClick(() => {
            if (this.count>0) {
              this.count--
            }
          })
      }
      Text("数值范围0-10")
        .fontSize(20)
        .fontColor(Color.Grey)
    }
    .height('100%')
    .width('100%')
    .padding(20)
  }
}