Toggle 组件提供状态按钮样式，勾选框样式及开关样式，一般用于两种状态之间的切换
创建切换按钮
创建不包含子组件的Toggle
当 ToggleType 为 Checkbox
Row() {
Toggle({ type: ToggleType.Checkbox, isOn: false })
Toggle({ type: ToggleType.Checkbox, isOn: true })
}.margin({left: 15})
当 ToggleType 为 Switch
Row() {
Toggle({ type: ToggleType.Switch, isOn: false })
Toggle({ type: ToggleType.Switch, isOn: true })
}.margin({left: 15})
创建包含子组件的Toggle
Row() {
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)
}.margin({left: 15})
自定义样式
- 通过
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 通常用于选中和取消选中后触发某些操作，可以绑定 onChange 事件来响应操作后的自定义行为
Toggle({ type: ToggleType.Switch, isOn: false })
.onChange((isOn: boolean) => {
if(isOn) {
// 需要执行的操作
}
})
