鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Toggle开关组件
一、操作环境
操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1
二、Toggle开关组件
接口
Toggle(options: { type: ToggleType, isOn?: boolean })
参数
参数名 |
参数类型 |
必填 |
默认值 |
参数描述 |
type |
ToggleType |
是 |
- |
开关类型。 |
isOn |
boolean |
否 |
false |
开关是否打开,true:打开,false:关闭。 |
Toggle({type: ToggleType.Switch})
Toggle({type: ToggleType.Checkbox})
属性
名称 |
参数 |
默认值 |
参数描述 |
selectedColor |
ResourceColor |
- |
设置组件打开状态的背景颜色。 |
switchPointColor |
ResourceColor |
- |
设置Switch类型的圆形滑块颜色。 说明: 仅对type为ToggleType.Switch生效。 |
事件
名称 |
功能描述 |
onChange(callback: (isOn: boolean) => void) |
开关状态切换时触发该事件。 |
三、示例
@Entry
@Component
struct Index {
// @ts-ignore
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Toggle({ type: ToggleType.Switch, isOn: true })
.selectedColor(0x39a2db)
.switchPointColor(0xe5ffffff)
.onChange((isOn: boolean) => {
console.info('Component status:' + isOn)
})
Toggle({type: ToggleType.Checkbox, isOn: true })
Toggle({type: ToggleType.Button}) {
Text('按钮样式')// 添加一个子组件
.fontSize(20)
}
.size({width: 120, height: 60})
}
.width('100%')
}
.height('100%')
}
}