【鸿蒙开发】系统组件Toggle

Toggle组件

Toggle组件提供勾选框样式、状态按钮样式及开关样式。

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

接口：

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

参数:

参数名	参数类型	必填	参数描述
type	ToggleType	是	开关的样式。
isOn	boolean	否	开关是否打开，true：打开，false：关闭。 默认值：false

ToggleType:

名称	描述
Checkbox	提供单选框样式。 说明： 通用属性margin的默认值为： { top: '14px', right: '14px', bottom: '14px', left: '14px' }
Button	提供状态按钮样式，如果子组件有文本设置，则相应的文本内容会显示在按钮内部。
Switch	提供开关样式。 说明： 通用属性margin的默认值为： { top: '6px', right: '14px', bottom: '6px', left: '14px }

属性:

除支持通用属性外，还支持以下属性：

名称	参数	参数描述
selectedColor	ResourceColor	设置组件打开状态的背景颜色。 从API version 9开始，该接口支持在ArkTS卡片中使用。
switchPointColor	ResourceColor	设置Switch类型的圆形滑块颜色。 说明： 仅对type为ToggleType.Switch生效。 从API version 9开始，该接口支持在ArkTS卡片中使用。

示例

@Entry
@Component
struct APage {
  build() {
    Column() {
      Toggle({ type: ToggleType.Checkbox, isOn: true })
        .selectedColor(Color.Red)

      Toggle({ type: ToggleType.Switch, isOn: true })
        .selectedColor(Color.Pink)
        .switchPointColor(Color.Blue)

      Toggle({ type: ToggleType.Button, isOn: false }) {
        Text("按钮")
      }
      .height(40)
      .width(100)
      .selectedColor(Color.Pink)
    }
    .width("100%")
    .height("100%")
  }
}