鸿蒙（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 | - | 设置组件打开状态的背景颜色。 | |
switchPointColor | - | 设置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%')
}
}
编辑