HarmonyOS 鸿蒙Next ArkTS语言教程入门学习第80天，切换按钮（Toggle）
HarmonyOS 鸿蒙Next ArkTS语言教程入门学习第80天，切换按钮（Toggle）
1、切换按钮（Toggle）
Toggle组件提供状态按钮样式，勾选框样式及开关样式，一般用于两种状态之间的切换。具体用法请参考Toggle。
2、创建切换按钮
Toggle通过调用接口来创建，接口调用形式如下：
Toggle(options: { type: ToggleType, isOn?: boolean })该接口用于创建切换按钮，其中ToggleType为开关类型，包括Button、Checkbox和Switch，isOn为切换按钮的状态，接口调用有以下两种形式：
创建不包含子组件的Toggle
当ToggleType为Checkbox或者Switch时，用于创建不包含子组件的Toggle：
Toggle({ type: ToggleType.Checkbox, isOn: false })
Toggle({ type: ToggleType.Checkbox, isOn: true })Toggle({ type: ToggleType.Switch, isOn: false })
Toggle({ type: ToggleType.Switch, isOn: true })创建包含子组件的Toggle
当ToggleType为Button时，只能包含一个子组件，如果子组件有文本设置，则相应的文本内容会显示在按钮内部。
Toggle({ type: ToggleType.Button, isOn: false }) {
Text('status button')
.fontColor('#182431')
.fontSize(12)
}.width(100)
Toggle({ type: ToggleType.Button, isOn: true }) {
Text('status button')
.fontColor('#182431')
.fontSize(12)
}.width(100)3、自定义样式
通过selectedColor属性设置Toggle打开选中后的背景颜色。
Toggle({ type: ToggleType.Button, isOn: true }) {
Text('status button')
.fontColor('#182431')
.fontSize(12)
}.width(100).selectedColor(Color.Pink)
Toggle({ type: ToggleType.Checkbox, isOn: true })
.selectedColor(Color.Pink)
Toggle({ type: ToggleType.Switch, isOn: true })
.selectedColor(Color.Pink)通过switchPointColor属性设置Switch类型的圆形滑块颜色，仅对type为ToggleType.Switch生效。
Toggle({ type: ToggleType.Switch, isOn: false })
.onChange((isOn: boolean) => {
if(isOn) {
// 需要执行的操作
}
})4、场景示例
Toggle可用于切换蓝牙开关状态。
// xxx.ets
import promptAction from '@ohos.promptAction';
@Entry
@Component
struct ToggleExample {
build() {
Column() {
Row() {
Text("Bluetooth Mode")
.height(50)
.fontSize(16)
}
Row() {
Text("Bluetooth")
.height(50)
.padding({left: 10})
.fontSize(16)
.textAlign(TextAlign.Start)
.backgroundColor(0xFFFFFF)
Toggle({ type: ToggleType.Switch })
.margin({left: 200, right: 10})
.onChange((isOn: boolean) => {
if(isOn) {
promptAction.showToast({ message: 'Bluetooth is on.' })
} else {
promptAction.showToast({ message: 'Bluetooth is off.' })
}
})
}
.backgroundColor(0xFFFFFF)
}
.padding(10)
.backgroundColor(0xDCDCDC)
.width('100%')
.height('100%')
}
}更多关于HarmonyOS 鸿蒙Next ArkTS语言教程入门学习第80天，切换按钮（Toggle）的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中，Toggle组件用于实现切换按钮的功能，允许用户在两种状态之间进行切换。Toggle组件通常用于开关、模式切换等场景。
基本用法
Toggle组件的基本用法如下：
import { Toggle } from '@ohos.arkui'
@Entry
@Component
struct ToggleExample {
@State isToggleOn: boolean = false
build() {
Column() {
Toggle({ isOn: this.isToggleOn })
.onChange((isOn: boolean) => {
this.isToggleOn = isOn
})
}
}
}属性
isOn：布尔值，表示Toggle的当前状态。onChange：回调函数，当Toggle状态发生变化时触发。
样式定制
可以通过样式属性对Toggle进行定制：
Toggle({ isOn: this.isToggleOn })
.width(100)
.height(50)
.backgroundColor(this.isToggleOn ? '#00FF00' : '#FF0000')事件处理
Toggle组件支持onChange事件，用于处理状态变化的逻辑：
Toggle({ isOn: this.isToggleOn })
.onChange((isOn: boolean) => {
console.log('Toggle state changed to:', isOn)
this.isToggleOn = isOn
})总结
Toggle组件在HarmonyOS鸿蒙Next中用于实现状态切换功能，通过isOn属性控制状态，onChange事件处理状态变化，并支持样式定制。
更多关于HarmonyOS 鸿蒙Next ArkTS语言教程入门学习第80天，切换按钮（Toggle）的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
