一篇帶給你OpenHarmony Toggle組件
作者：拓維信息田怡婧
Checkbox、Switch子組件會(huì)渲染在控件之后，推薦使用Row容器包裹。Button子組件會(huì)渲染在控件內(nèi)。
??想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：??
??51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)??
??https://harmonyos.51cto.com??
支持版本
OpenHarmony 3.1beta
SDK Version 8
子組件
可以包含子組件。
Checkbox、Switch子組件會(huì)渲染在控件之后，推薦使用Row容器包裹。
Button子組件會(huì)渲染在控件內(nèi)。
接口
Toggle(
options: {
type: ToggleType,
isOn?: boolean
}
)
參數(shù)
ToggleType枚舉說(shuō)明
事件
特有屬性
屬性
具有通用屬性，這里只介紹使用率比較高的屬性。
- 使用responseRegion屬性可以模擬web label標(biāo)簽效果。
- 組件響應(yīng)會(huì)自行切換狀態(tài)，可以考慮使用touchable/enabled來(lái)限制。
- size與width&height屬性會(huì)互相覆蓋，后定義的屬性會(huì)覆蓋前一個(gè)。
復(fù)選框Checkbox
默認(rèn)樣式
特性
- 不指定寬高時(shí)，響應(yīng)區(qū)域默認(rèn)寬高為 74vp X 74vp，控件區(qū)域?qū)捀邽?6vp X 46vp
- 復(fù)選框控件會(huì)始終根據(jù)當(dāng)前所使用單位，在定義的寬高基礎(chǔ)上，每邊加上一個(gè)14單位的空間。比如，設(shè)置Toggle寬高為100vp X 100vp時(shí)，那么整個(gè)組件的實(shí)際寬高為128vp X 128vp。
- 使用.padding(0)可以去除默認(rèn)空白區(qū)域。調(diào)試時(shí)可以添加border屬性來(lái)查看響應(yīng)區(qū)域。
- 未選中狀態(tài)默認(rèn)邊框無(wú)法通過(guò)border修改
或許當(dāng)前我們可以嘗試將樣式覆蓋上去：
實(shí)現(xiàn)代碼：
Toggle({
type: ToggleType.Checkbox,
isOn: false
})
.selectedColor(Color.Red)
.backgroundColor(Color.Red)
.borderRadius(5)
.padding(0)
.margin(20)
.border({
width: 1
})
示例
實(shí)現(xiàn)代碼：
ForEach(Array(4), (v, k) => {
Row() {
Toggle({
type: ToggleType.Checkbox,
isOn: k == 0 ? true : false
}) {
Text(`測(cè)試選項(xiàng)${k+1}`).fontSize(30)
}
.onChange((res) => {
console.log(res.toString())
})
.selectedColor(Color.Red)
.responseRegion({ //設(shè)置可操作區(qū)域?yàn)檎?/span>
x: 0,
y: 0,
width: '720lpx', //designWidth = 720；width設(shè)置為100%時(shí)，為控件的寬，這里為100% = 50 + 28 = 78；
height: 100
})
.size({
width: 50,
height: 50
})
}
.backgroundColor('#ddd')
.width("100%")
.height(100)
Divider()
})
開(kāi)關(guān)Switch
默認(rèn)樣式
特性
- 不指定寬高時(shí)，響應(yīng)區(qū)域默認(rèn)寬高為 60vp X 76vp，控件區(qū)域?qū)捀邽?8vp X 26vp
- 開(kāi)關(guān)控件會(huì)始終根據(jù)當(dāng)前所使用單位，在定義的寬高基礎(chǔ)上，左右加上一個(gè)6單位的空間，上下加上一個(gè)25單位的空間。比如，設(shè)置Toggle寬高為100vp X 100vp時(shí)，那么整個(gè)組件的實(shí)際寬高為112vp X 150vp。
- 使用.width(60).padding(0)，可以去除默認(rèn)空白區(qū)域。調(diào)試時(shí)可以添加border屬性來(lái)查看響應(yīng)區(qū)域。
- 開(kāi)關(guān)控件背景色無(wú)法修改。
或許當(dāng)前我們可以嘗試將樣式覆蓋上去：
實(shí)現(xiàn)代碼：
Toggle({
type: ToggleType.Switch,
isOn: false
})
.padding(0)
.width(60)
.backgroundColor(Color.Pink)
.borderRadius(20)
.selectedColor(Color.Red)
示例
實(shí)現(xiàn)代碼：
ForEach(Array(4), (v, k) => {
Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text(`測(cè)試選項(xiàng)${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
默認(rèn)樣式
特性
- 需要指定一個(gè)寬度，默認(rèn)寬度為0，默認(rèn)高度為28vp。
- 按鈕形式可以看做同button組件。
- 按鈕控件背景色無(wú)法修改。
或許當(dāng)前我們可以嘗試將樣式覆蓋上去：
實(shí)現(xiàn)代碼：
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(`測(cè)試選項(xiàng)${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)
})
??想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：??
??51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)??
??https://harmonyos.51cto.com??
責(zé)任編輯：jianghua
來(lái)源：
鴻蒙社區(qū)
