OpenHarmony实战开发-如何实现切换按钮 (Toggle)

Toggle组件提供状态按钮样式、勾选框样式和开关样式，一般用于两种状态之间的切换。

创建切换按钮

Toggle通过调用接口来创建，接口调用形式如下：

Toggle(options: {
    type: ToggleType, isOn?: boolean })
ts

其中，ToggleType为开关类型，包括Button、Checkbox和Switch，isOn为切换按钮的状态。

API version 11开始，Checkbox默认样式由圆角方形变为圆形。

接口调用有以下两种形式：

• 创建不包含子组件的Toggle。 当ToggleType为Checkbox或者Switch时，用于创建不包含子组件的Toggle：

Toggle({
    type: ToggleType.Checkbox, isOn: false })
Toggle({
    type: ToggleType.Checkbox, isOn: true })

Toggle({
    type: ToggleType.Switch, isOn: false })
Toggle({
    type: ToggleType.Switch, isOn: true })

• 创建包含子组件的Toggle。当ToggleType为Button时，只能包含一个子组件，如果子组件有文本设置，则相应的文本内容会显示在按钮上。

Toggle({
    type: ToggleType.Button, isOn: false }) {
   
  Text('status button')
    .fontColor('#182431')
    .fontSize(12)
}.width(100)
Toggle({
    type: ToggleType.Button, isOn: true })