ArkUI---常用组件---切换按钮 (Toggle)

时间：2024-11-17 07:56:46

文章目录

    • @[toc]
  • 创建切换按钮
    • 创建不包含子组件的Toggle
      • 1.当ToggleType为`Checkbox`
      • 2.当ToggleType为`Switch`
    • 创建包含子组件的Toggle。
      • 3.当ToggleType为`Button`时
    • 自定义样式
      • 1.通过`selectedColor`属性设置Toggle打开选中后的背景颜色。
      • 2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色，仅对ToggleType.`Switch`生效。
      • 2.添加事件
    • 场景示例：Toggle用于切换蓝牙开关状态。
    • 完整代码：

Toggle组件提供状态按钮样式、勾选框样式和开关样式，一般用于两种状态之间的切换。
在这里插入图片描述

创建切换按钮

Toggle通过调用接口来创建，接口调用形式如下：

Toggle(options: { type: ToggleType, isOn?: boolean })

ToggleType为开关类型，包括Button、Checkbox和Switch
isOn: 为切换按钮的状态。

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

创建不包含子组件的Toggle

当ToggleType为Checkbox或者Switch时，用于创建不包含子组件的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。

当ToggleType为Button时，只能包含一个子组件，如果子组件有文本设置，则相应的文本内容会显示在按钮上。

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还用于选中和取消选中后触发某些操作，可以绑定onChange事件来响应操作后的自定义行为。

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})
   }

  }
}

相关文章