甜甜酱OH文档补充OpenHarmony Toggle组件

亦余心之所善兮，虽九死其犹未悔。这篇文章主要讲述甜甜酱OH文档补充OpenHarmony Toggle组件相关的知识，希望能为你提供帮助。
支持版本OpenHarmony 3.1beta
SDK Version 8
子组件可以包含子组件。
接口

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

参数

参数名	参数类型	必填	默认值	参数描述
type	ToggleType	是	无	组件展现形式
isOn	boolean	否	false	是否选中状态

ToggleType枚举说明

名称	描述
Checkbox	复选框切换组件
Switch	开关式切换组件
Button	简单按钮式切换组件。默认带圆角边（无法修改）。高宽设置一样时，将展示圆形按钮。

事件

名称	功能描述
onChange( isOn: boolean) => void	当前组件选中状态变化时触发事件

特有属性

名称	参数说明	描述
selectedColor	ResourceColor	当设置选中状态组件背景色
switchPointColor	ResourceColor	当组件类型为Switch时，设置开关圆点背景色

属性具有通用属性，这里只介绍使用率比较高的属性。

使用responseRegion属性可以模拟web label标签效果。
组件响应会自行切换状态，可以考虑使用touchable/enabled来限制。
size与width& height属性会互相覆盖，后定义的属性会覆盖前一个。

名称	类型	描述
width	Length	设置组件自身的宽度；`type`为`Button`必须设置宽度。
height	Length	设置组件自身的高度
responseRegion	Array< Rectangle> \| Rectangle	设置当前组件的响应区域。区域x与y坐标基于渲染控件的最左上边缘。
size	width?: Length,height?: Length	设置高宽尺寸。width与height设置一样时可以展现圆形按钮。
touchable	boolean	设置当前组件的可触摸性
padding	top?: Length,right?: Length,bottom?: Length,left?: Length \| Length	设置内边距属性。参数为Length类型时，四个方向内边距同时生效。
margin	top?: Length,right?: Length,bottom?: Length,left?: Length\| Length	设置外边距属性。参数为Length类型时，四个方向外边距同时生效。
backgroundColor	Color	设置背景色
opacity	number \| Resource	透明度
border	width?: Length,color?: Color,radius?: Length,style?: BorderStyle	统一边框样式设置接口。
borderStyle	BorderStyle	设置元素的边框样式。
borderWidth	Length	设置元素的边框宽度。
borderColor	Color	设置元素的边框颜色。
borderRadius	Length	设置元素的边框圆角半径。
enabled	boolean	值为true表示组件可用，可响应点击等操作；值为false时，不响应点击等操作。
aspectRatio	number	组件进行缩放
clip	Shape \| boolean	`type`为`Button`时可以进行裁剪

复选框Checkbox 默认样式

文章图片

特性

不指定宽高时，响应区域默认宽高为 74vp X 74vp，控件区域宽高为46vp X 46vp
复选框控件会始终根据当前所使用单位，在定义的宽高基础上，每边加上一个14单位的空间。比如，设置Toggle宽高为100vp X 100vp时，那么整个组件的实际宽高为128vp X 128vp。
使用.padding(0)可以去除默认空白区域。调试时可以添加border属性来查看响应区域。
未选中状态默认边框无法通过border修改

或许当前我们可以尝试将样式覆盖上去：

文章图片

实现代码：

Toggle( type: ToggleType.Checkbox, isOn: false ) .selectedColor(Color.Red) .backgroundColor(Color.Red) .borderRadius(5) .padding(0) .margin(20) .border( width: 1 )

示例【甜甜酱OH文档补充OpenHarmony Toggle组件】

文章图片

实现代码：

ForEach(Array(4), (v, k) => Row() Toggle( type: ToggleType.Checkbox, isOn: k == 0 ? true : false ) Text(`测试选项$k+1`).fontSize(30).onChange((res) => console.log(res.toString()) ) .selectedColor(Color.Red) .responseRegion(//设置可操作区域为整行 x: 0, y: 0, width: 720lpx,//designWidth = 720；width设置为100%时，为控件的宽，这里为100% = 50 + 28 = 78； height: 100 ) .size( width: 50, height: 50 ).backgroundColor(#ddd) .width("100%") .height(100)Divider() )

开关Switch 默认样式

文章图片

特性

不指定宽高时，响应区域默认宽高为 60vp X 76vp，控件区域宽高为48vp X 26vp
开关控件会始终根据当前所使用单位，在定义的宽高基础上，左右加上一个6单位的空间，上下加上一个25单位的空间。比如，设置Toggle宽高为100vp X 100vp时，那么整个组件的实际宽高为112vp X 150vp。
使用.width(60).padding(0)，可以去除默认空白区域。调试时可以添加border属性来查看响应区域。
开关控件背景色无法修改。

或许当前我们可以尝试将样式覆盖上去：

文章图片

实现代码：

Toggle( type: ToggleType.Switch, isOn: false ) .padding(0) .width(60) .backgroundColor(Color.Pink) .borderRadius(20) .selectedColor(Color.Red)

示例

文章图片

实现代码：

ForEach(Array(4), (v, k) => Flex( alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center ) Text(`测试选项$k + 1`).flexGrow(1).fontSize(30lpx) Toggle( type: ToggleType.Switch, isOn: k == 0 ? true : false ).onChange((res) => console.log(res.toString()) ) .selectedColor(Color.Yellow) .switchPointColor(Color.Brown) .size( width: 100lpx, height: 80lpx ).backgroundColor(#ddd) .padding( left: 20, right: 20 )Divider() )

按钮Button 默认样式

文章图片

特性

需要指定一个宽度，默认宽度为0，默认高度为28vp。
按钮形式可以看做同button组件。
按钮控件背景色无法修改。

或许当前我们可以尝试将样式覆盖上去：

文章图片

实现代码：

Toggle( type: ToggleType.Button, isOn: false ) .width(80) .selectedColor(Color.Red) .backgroundColor(Color.Pink) .borderRadius(15)

示例

文章图片

ForEach(Array(4), (v, k) => Toggle( type: ToggleType.Button, isOn: k == 0 ? true : false ) Text(`测试选项$k + 1`).flexGrow(1).fontSize(24).fontColor(Color.White).selectedColor(Color.Blue) .backgroundColor(Color.Green) .borderRadius(150) .size( width: 150, height: 80 ) .onChange((res) => console.log(res.toString()) ) .margin(10) )

想了解更多关于鸿蒙的内容，请访问：
51CTO和华为官方合作共建的鸿蒙技术社区
https://harmonyos.51cto.com/#bkwz
::: hljs-center