选用多种开关的样式使用Toggle组件

仅当ToggleType为Button时可包含子组件。

Button可设置文本

selectedColor选择按键颜色

.onChange可以打印isOn的值

Toggle({ type: ToggleType.Button, isOn: false }) {
  Text('status button').fontColor('#182431').fontSize(12)
}.width(106)
.selectedColor('rgba(0,125,255,0.20)')
.onChange((isOn: boolean) => {
  console.info('Component status:' + isOn)
})

Checkbox为单选框样式

selectedColor选择按键颜色

.onChange可以打印isOn的值

Toggle({ type: ToggleType.Checkbox, isOn: false })
  .size({ width: 20, height: 20 })
  .selectedColor('#007DFF')
  .onChange((isOn: boolean) => {
    console.info('Component status:' + isOn)
  })

Switch为提供开关样式

switchPointColor设置点的颜色

selectedColor设置空白处颜色

.onChange可以打印isOn的值

Toggle({ type: ToggleType.Switch, isOn: false })
  .selectedColor('#007DFF')
  .switchPointColor('#FFFFFF')
  .onChange((isOn: boolean) => {
    console.info('Component status:' + isOn)
  })

当多个按键并排时可以使用Flex以弹性方式布局子组件的容器组件。

Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }){}

.onClick同时可以触发点击效果。