文章目录
创建切换按钮
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})
}
}
}