0
点赞
收藏
分享

微信扫一扫

【微信小程序】用户房屋管理

文章目录

创建切换按钮

Toggle通过调用接口来创建,接口调用形式如下:

API version 11开始,Checkbox默认样式由圆角方形变为*圆形*

创建不包含子组件的Toggle

1.当ToggleType为Checkbox

	Row(){
      Toggle({type:ToggleType.Checkbox,isOn:false})
      Toggle({type:ToggleType.Checkbox,isOn:true})
    }

在这里插入图片描述

2.当ToggleType为Switch

	Row(){
       Toggle({type:ToggleType.Switch,isOn:false})
       Toggle({type:ToggleType.Switch,isOn:true})
     }

在这里插入图片描述

创建包含子组件的Toggle。

3.当ToggleType为Button

Row({space:10}){
    Toggle({type:ToggleType.Button, isOn:false}){
      Text('Status button')
        .fontSize(12)
    }

     Toggle({type:ToggleType.Button, isOn:true}){
      Text('Status button')
       .fontSize(12)
    }
   }

在这里插入图片描述

自定义样式

1.通过selectedColor属性设置Toggle打开选中后的背景颜色。

Row(){
      //Button
       Toggle({ type: ToggleType.Button, isOn: true }) {
         Text('status button')
           .fontSize(12)
       }.width(100)
       .selectedColor(Color.Pink)
       //Checkbox
       Toggle({ type: ToggleType.Checkbox, isOn: true })
         .selectedColor(Color.Pink)
       //Switch
       Toggle({ type: ToggleType.Switch, isOn: true })
         .selectedColor(Color.Pink)
     }

在这里插入图片描述

2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色,仅对ToggleType.Switch生效。

Row(){
       Toggle({ type: ToggleType.Switch, isOn: false })
         .selectedColor(Color.Pink)
       Toggle({ type: ToggleType.Switch, isOn: true })
         .selectedColor(Color.Pink)
     }

在这里插入图片描述

2.添加事件

Toggle({ type: ToggleType.Switch, isOn: false })
  .onChange((isOn: boolean) => {
      if(isOn) {
        // 需要执行的操作
      }
  })

场景示例:Toggle用于切换蓝牙开关状态。

在这里插入图片描述
在这里插入图片描述
完整代码:

import { promptAction, PromptAction } from '@kit.ArkUI'

@Entry
@Component
struct Index01 {
  build() {
    Column(){
      Row(){
        Text('蓝牙模式!')
      }.padding(20)
      Row(){
        Text('蓝牙')
        Toggle({type:ToggleType.Switch,isOn:true})
          .onChange((isOn:boolean)=>{
            if (isOn) {
              promptAction.showToast({
                message: '蓝牙已打开!',
                duration:3000
              })
            }else {
              promptAction.showToast({
                message: '蓝牙已关闭!',
                duration:3000
              })
            }

          })
      }.height(40).width('80%').backgroundColor(Color.White).padding(10)
      .justifyContent(FlexAlign.SpaceBetween)
    }.width('100%').height('100%').backgroundColor(Color.Gray)
  }
}

完整代码:

@Entry
@Component
struct Demo1 {
  build() {
   Column(){

    Row(){
      Toggle({type:ToggleType.Checkbox,isOn:false})
      Toggle({type:ToggleType.Checkbox,isOn:true})
    }

     Row(){
       Toggle({type:ToggleType.Switch,isOn:false})
       Toggle({type:ToggleType.Switch,isOn:true})
     }

     Row({space:10}){
      Toggle({type:ToggleType.Button, isOn:false}){
        Text('Status button')
          .fontSize(12)
      }

       Toggle({type:ToggleType.Button, isOn:true}){
        Text('Status button')
         .fontSize(12)
      }
     }

     Row(){
      //Button
       Toggle({ type: ToggleType.Button, isOn: true }) {
         Text('status button')
           .fontSize(12)
       }.width(100)
       .selectedColor(Color.Pink)
       //Checkbox
       Toggle({ type: ToggleType.Checkbox, isOn: true })
         .selectedColor(Color.Pink)
       //Switch
       Toggle({ type: ToggleType.Switch, isOn: true })
         .selectedColor(Color.Pink)
     }

     Row(){
       Toggle({ type: ToggleType.Switch, isOn: false })
         .selectedColor(Color.Pink)
       Toggle({ type: ToggleType.Switch, isOn: true })
         .selectedColor(Color.Pink)
     }

     //Toggle形态1:双态按钮
     Toggle({ type: ToggleType.Button, isOn: true }) {
       Text('开启')
     }.selectedColor(Color.Green)
     .onChange((isOn) => {
       console.log('双态按钮被改变:', isOn)  //打印为true
     })

     //形态2:复选框
     Toggle({ type: ToggleType.Checkbox })
     Text('记住登入信息')

     // 形态3:开关
     Toggle({type:ToggleType.Switch})
   }

  }
}
举报

相关推荐

0 条评论