【鸿蒙开发】系统组件Toggle

鸿蒙开发arkui组件，Toggle组件

d312697510

829人浏览 · 2024-04-07 17:31:01

d312697510 · 2024-04-07 17:31:01 发布

Toggle组件

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

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

接口：

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

参数:

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

参数名

参数类型

必填

参数描述

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 }

名称

描述

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卡片中使用。

名称

参数

参数描述

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%")
  }
}