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

### 文章目录

  • [@[toc]](#文章目录 @[toc] 创建切换按钮 创建不包含子组件的Toggle 1.当ToggleType为Checkbox 2.当ToggleType为Switch 创建包含子组件的Toggle。 3.当ToggleType为Button时 自定义样式 1.通过selectedColor属性设置Toggle打开选中后的背景颜色。 2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色,仅对ToggleType.Switch生效。 2.添加事件 场景示例:Toggle用于切换蓝牙开关状态。 完整代码:)
  • [创建切换按钮](#文章目录 @[toc] 创建切换按钮 创建不包含子组件的Toggle 1.当ToggleType为Checkbox 2.当ToggleType为Switch 创建包含子组件的Toggle。 3.当ToggleType为Button时 自定义样式 1.通过selectedColor属性设置Toggle打开选中后的背景颜色。 2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色,仅对ToggleType.Switch生效。 2.添加事件 场景示例:Toggle用于切换蓝牙开关状态。 完整代码:)
  • [创建不包含子组件的Toggle](#文章目录 @[toc] 创建切换按钮 创建不包含子组件的Toggle 1.当ToggleType为Checkbox 2.当ToggleType为Switch 创建包含子组件的Toggle。 3.当ToggleType为Button时 自定义样式 1.通过selectedColor属性设置Toggle打开选中后的背景颜色。 2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色,仅对ToggleType.Switch生效。 2.添加事件 场景示例:Toggle用于切换蓝牙开关状态。 完整代码:)
  • [1.当ToggleType为`Checkbox`](#文章目录 @[toc] 创建切换按钮 创建不包含子组件的Toggle 1.当ToggleType为Checkbox 2.当ToggleType为Switch 创建包含子组件的Toggle。 3.当ToggleType为Button时 自定义样式 1.通过selectedColor属性设置Toggle打开选中后的背景颜色。 2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色,仅对ToggleType.Switch生效。 2.添加事件 场景示例:Toggle用于切换蓝牙开关状态。 完整代码:)
  • [2.当ToggleType为`Switch`](#文章目录 @[toc] 创建切换按钮 创建不包含子组件的Toggle 1.当ToggleType为Checkbox 2.当ToggleType为Switch 创建包含子组件的Toggle。 3.当ToggleType为Button时 自定义样式 1.通过selectedColor属性设置Toggle打开选中后的背景颜色。 2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色,仅对ToggleType.Switch生效。 2.添加事件 场景示例:Toggle用于切换蓝牙开关状态。 完整代码:)
  • [创建包含子组件的Toggle。](#文章目录 @[toc] 创建切换按钮 创建不包含子组件的Toggle 1.当ToggleType为Checkbox 2.当ToggleType为Switch 创建包含子组件的Toggle。 3.当ToggleType为Button时 自定义样式 1.通过selectedColor属性设置Toggle打开选中后的背景颜色。 2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色,仅对ToggleType.Switch生效。 2.添加事件 场景示例:Toggle用于切换蓝牙开关状态。 完整代码:)
  • [3.当ToggleType为`Button`时](#文章目录 @[toc] 创建切换按钮 创建不包含子组件的Toggle 1.当ToggleType为Checkbox 2.当ToggleType为Switch 创建包含子组件的Toggle。 3.当ToggleType为Button时 自定义样式 1.通过selectedColor属性设置Toggle打开选中后的背景颜色。 2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色,仅对ToggleType.Switch生效。 2.添加事件 场景示例:Toggle用于切换蓝牙开关状态。 完整代码:)
  • [自定义样式](#文章目录 @[toc] 创建切换按钮 创建不包含子组件的Toggle 1.当ToggleType为Checkbox 2.当ToggleType为Switch 创建包含子组件的Toggle。 3.当ToggleType为Button时 自定义样式 1.通过selectedColor属性设置Toggle打开选中后的背景颜色。 2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色,仅对ToggleType.Switch生效。 2.添加事件 场景示例:Toggle用于切换蓝牙开关状态。 完整代码:)
  • [1.通过`selectedColor`属性设置Toggle打开选中后的背景颜色。](#文章目录 @[toc] 创建切换按钮 创建不包含子组件的Toggle 1.当ToggleType为Checkbox 2.当ToggleType为Switch 创建包含子组件的Toggle。 3.当ToggleType为Button时 自定义样式 1.通过selectedColor属性设置Toggle打开选中后的背景颜色。 2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色,仅对ToggleType.Switch生效。 2.添加事件 场景示例:Toggle用于切换蓝牙开关状态。 完整代码:)
  • [2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色,仅对ToggleType.`Switch`生效。](#文章目录 @[toc] 创建切换按钮 创建不包含子组件的Toggle 1.当ToggleType为Checkbox 2.当ToggleType为Switch 创建包含子组件的Toggle。 3.当ToggleType为Button时 自定义样式 1.通过selectedColor属性设置Toggle打开选中后的背景颜色。 2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色,仅对ToggleType.Switch生效。 2.添加事件 场景示例:Toggle用于切换蓝牙开关状态。 完整代码:)
  • [2.添加事件](#文章目录 @[toc] 创建切换按钮 创建不包含子组件的Toggle 1.当ToggleType为Checkbox 2.当ToggleType为Switch 创建包含子组件的Toggle。 3.当ToggleType为Button时 自定义样式 1.通过selectedColor属性设置Toggle打开选中后的背景颜色。 2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色,仅对ToggleType.Switch生效。 2.添加事件 场景示例:Toggle用于切换蓝牙开关状态。 完整代码:)
  • [场景示例:Toggle用于切换蓝牙开关状态。](#文章目录 @[toc] 创建切换按钮 创建不包含子组件的Toggle 1.当ToggleType为Checkbox 2.当ToggleType为Switch 创建包含子组件的Toggle。 3.当ToggleType为Button时 自定义样式 1.通过selectedColor属性设置Toggle打开选中后的背景颜色。 2、通过SwitchPointColor属性设置Switch类型的圆形滑块颜色,仅对ToggleType.Switch生效。 2.添加事件 场景示例:Toggle用于切换蓝牙开关状态。 完整代码:)
  • [完整代码:](#文章目录 @[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、CheckboxSwitch
isOn: 为切换按钮的状态。

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

创建不包含子组件的Toggle

当ToggleType为Checkbox或者Switch时,用于创建不包含子组件的Toggle:

1.当ToggleType为Checkbox

typescript 复制代码
	Row(){
      Toggle({type:ToggleType.Checkbox,isOn:false})
      Toggle({type:ToggleType.Checkbox,isOn:true})
    }

2.当ToggleType为Switch

typescript 复制代码
	Row(){
       Toggle({type:ToggleType.Switch,isOn:false})
       Toggle({type:ToggleType.Switch,isOn:true})
     }

创建包含子组件的Toggle。

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

3.当ToggleType为Button

typescript 复制代码
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打开选中后的背景颜色。

typescript 复制代码
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生效。

typescript 复制代码
Row(){
       Toggle({ type: ToggleType.Switch, isOn: false })
         .selectedColor(Color.Pink)
       Toggle({ type: ToggleType.Switch, isOn: true })
         .selectedColor(Color.Pink)
     }

2.添加事件

除支持通用事件外,Toggle还用于选中和取消选中后触发某些操作,可以绑定onChange事件来响应操作后的自定义行为。

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

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


完整代码:

typescript 复制代码
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)
  }
}

完整代码:

typescript 复制代码
@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})
   }

  }
}
相关推荐
洛*璃6 小时前
HarmonyOS 开发环境搭建
华为·harmonyos·deveco studio
聊无生10 小时前
HarmonyOS ArkUI(基于ArkTS) 常用组件
前端·华为·harmonyos
聊无生10 小时前
HarmonyOS ArkUI(基于ArkTS) 开发布局 (中)
华为·harmonyos
二流小码农10 小时前
鸿蒙开发:自定义一个简单的标题栏
android·ios·harmonyos
泥土编程11 小时前
linux服务器配置大全
linux·运维·服务器·华为
凌霜残雪11 小时前
HarmonyOS4+NEXT星河版入门与项目实战--------开发工具与环境准备
harmonyos
个人开发-胡涂涂11 小时前
鸿蒙生态:开发者的新征程与挑战并存
华为·harmonyos
MardaWang11 小时前
HarmonyOS开发 API 13发布首个Beta版本,部分已知的问题建议处理方案
华为·harmonyos