想要了解更多请访问：Harmonyos.51cto.com支持版本OpenHarmony3.1betaSDKVersion8子组件可以包含子组件。Checkbox和Switch子组件会在控件之后渲染，建议使用Row容器将它们包裹起来。Button子组件将在控件内呈现。接口Toggle(options:{type:ToggleType,isOn?:boolean})参数ToggleType枚举了event-specificattributes有共同属性，这里只介绍使用率比较高的attribute。使用responseRegion属性来模拟weblabel标签的效果。组件响应会自行切换状态，可以考虑使用touchable/enabled来限制。size和width&height属性会相互覆盖，后面定义的属性会覆盖前面定义的属性。当Checkbox的默认样式属性没有指定宽高时，响应区默认宽高为74vpX74vp，控制区宽高为46vpX46vp。复选框控件将始终根据当前使用的unit定义的宽度和高度，每边加上14个单位的空间。例如设置Toggle的宽高为100vpX100vp，则整个组件的实际宽高为128vpX128vp。使用.padding(0)删除默认空白。调试时可以添加border属性来查看响应区域。未选中状态的默认边框无法通过边框进行修改。或许我们可以尝试覆盖目前的样式：实现代码：Toggle({type:ToggleType.Checkbox,isOn:false}).selectedColor(Color.Red).backgroundColor(Color.Red).borderRadius(5).padding(0).margin(20).border({width:1})示例实现代码：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开关默认样式特性不指定宽高时，响应区域默认宽高为60vpX76vp，控件的宽高area为48vpX26vp开关控制会一直按照当前使用的单位，在定义的宽高的基础上，在左右各增加6个单位的空间，在上、下各增加25个单位的空间底部位空间例如设置Toggle的宽高为100vpX100vp，则整个元件的实际宽高为112vpX150vp。使用.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(`testoption${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默认样式特性Button需要指定宽度，默认宽度为0，默认高度为28vp。按钮窗体可以看作是同一个按钮组件。不能修改按钮控件的背景颜色。或许我们可以尝试覆盖目前的样式：实现代码：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(`testoption${k+1}`).flexGrow(1).fontSize(24).fontColor(Color.White)}.selectedColor(Color.Blue).backgroundColor(Color.Green).borderRadius(150).size({宽度：150，高度：80}).onChange((res)=>{console.log(res.toString())}).margin(10)})更多内容请访问：携手华为打造鸿蒙科技社区https://harmonyos.51cto.com
