
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
可能会有遗漏或者错误,欢迎大家指正补充。
文档补充会跟随我自己学习进度不定期更新,包含我自己总结的一些简单示例。
OpenHarmony 3.1beta
SDK Version 8
可以包含子组件。
Checkbox、Switch子组件会渲染在控件之后,推荐使用Row容器包裹。
Button子组件会渲染在控件内。
Toggle(
options: {
type: ToggleType,
isOn?: boolean
}
)
参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
---|---|---|---|---|
type | ToggleType | 是 | 无 | 组件展现形式 |
isOn | boolean | 否 | false | 是否选中状态 |
名称 | 描述 |
---|---|
Checkbox | 复选框切换组件 |
Switch | 开关式切换组件 |
Button | 简单按钮式切换组件。默认带圆角边(无法修改)。高宽设置一样时,将展示圆形按钮。 |
名称 | 功能描述 |
---|---|
onChange( isOn: boolean) => void | 当前组件选中状态变化时触发事件 |
名称 | 参数说明 | 描述 |
---|---|---|
selectedColor | ResourceColor | 当设置选中状态组件背景色 |
switchPointColor | ResourceColor | 当组件类型为Switch时,设置开关圆点背景色 |
具有通用属性,这里只介绍使用率比较高的属性。
名称 | 类型 | 描述 |
---|---|---|
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 时可以进行裁剪 |
.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
})
实现代码:
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()
})
.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
组件。或许当前我们可以尝试将样式覆盖上去:
实现代码:
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)
})