鸿蒙ArkUI Toggle组件三个实战案例

2201_76108053

155人浏览 · 2026-06-17 18:05:10

2201_76108053 · 2026-06-17 18:05:10 发布

一、Toggle组件基础

Toggle为鸿蒙切换组件，包含两种类型：

Switch：滑块开关，适配功能开关、记住密码场景
Checkbox：复选框，适配多选勾选

核心原理：@State修饰变量，页面数据实时联动；onChange监听开关点击，改变量、页面自动刷新，新手易懂双向绑定逻辑。

常用属性：type、isOn、selectedColor、宽高、onChange

案例1：基础开关联动 ToggleDemo

页面&功能：消息推送滑块开关，切换开关，上方文字、文字颜色同步变化，开关开启红字、关闭绿字。

@Entry
@Component
struct ToggleDemo{
  @State isShow:boolean = false
  build() {
    Column(){
      Text(this.isShow?"开关已开启":"开关已关闭")
        .fontSize(32)
        .fontColor(this.isShow?Color.Red:Color.Green)


      Row({space:20}){
        Text("开启消息推送")
          .fontSize(26)
        Toggle({
          type:ToggleType.Switch,
          isOn:false
        })
          .height(38)
          .width(80)
          .selectedColor(Color.Red)
          .onChange((value: boolean) =>{
            this.isShow = value
          })
      }
    }
    .width('100%')
    .height('100%')
  }
}

✅新手代码讲解：1.@State isShow：定义开关状态变量，默认关闭；2.Toggle绑定开关样式，监听点击事件；3.切换开关，把开关状态赋值给isShow；4.文字、颜色用三元表达式，跟着变量自动切换。

案例2：双样式Toggle Toggle1

页面&功能：同时展示复选框、滑块两种开关；滑动滑块，下方提示文字同步切换开关状态。

@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((value:boolean)=>{
          this.isopen=! this.isopen
        })
      Text(this.isopen?"开关已打开":"开关已关闭")
        .fontSize(20)
    }
    .width('100%')
    .height('100%')
  }
}

✅新手代码讲解：1.两种type切换开关样式；2.和案例1区别：不直接接收开关返回值，用 !isopen 让变量取反；3.变量取反后，页面文字同步更新状态。

案例3：登录页-记住密码 Mypages

页面&功能：登录界面，包含头像、账号密码输入框、记住密码开关、登录注册按钮；输入账号密码，点击登录弹窗提示结果。

@Entry
@Component
struct Mypages {
  @State isRemb: boolean = true;
  @State username: string = "";
  @State password:string="";

  build() {
    Column({ space: 30 }) {
      Image($r('app.media.banner0'))
        .width(120)
        .height(120)
        .borderRadius(60)
        .shadow({ radius: 50, color: Color.Red })

      Text("账号登录")
        .fontSize(30)
        .fontWeight(FontWeight.Bolder)

        TextInput({ text: this.username, placeholder: "请输入账号" })
          .width('100%')
          .height(50)
          .borderRadius(12)
          .padding({ left: 20 })
          .onChange((value: string) => {
            this.username = value
          })
        TextInput({ text: this.password, placeholder: "请输入密码" })
          .type(InputType.Password)
          .width('100%')
          .height(50)
          .padding({ left: 20 })
          .borderRadius(12)
          .onChange((value: string) => {
            this.password = value
          })

      Row({ space: 20 }) {
        Text("记住密码")
          .fontSize(20)
        Toggle({
          type:ToggleType.Switch,
          isOn:this.isRemb
        })
          .height(38)
          .width(80)
          .selectedColor(Color.Red)
          .onChange((value: boolean) => {
            this.isRemb = value
          })
      }

      Row({space: 20 }) {
        Button('登录')
          .width('140')
          .height('50')
          .fontSize(20)
          .onClick(()=>{
            if (this.username && this.password){
              AlertDialog.show({
                title:"登录成功",
                message:'欢迎你，${this.username}'
              })
            }else {
              AlertDialog.show({
                title:"登录失败",
                message:'用户名${this.username}或密码不正确'
              })
            }
          })

        Button('注册')
          .width('140')
          .height(50)
          .fontSize(26)

      }
    }
    .width('100%')
    .height('100%')
    .padding(15)
    .justifyContent(FlexAlign.Center)
  }
}