零基礎學鴻蒙程式設計-UI控制元件_ToggleButton

什麼是ToggleButton

ToggleButton是一種用於顯示開關狀態的按鈕控制元件,也Switch比較相似。

基礎樣例

1。普通開關

效果圖

零基礎學鴻蒙程式設計-UI控制元件_ToggleButton

程式碼

2。選中開關

效果圖

零基礎學鴻蒙程式設計-UI控制元件_ToggleButton

程式碼

3。設定文字

效果圖

零基礎學鴻蒙程式設計-UI控制元件_ToggleButton

程式碼

4。設定開關上文字顏色

效果圖

零基礎學鴻蒙程式設計-UI控制元件_ToggleButton

程式碼

基礎樣例完整原始碼

https://gitee。com/hspbc/harmonyos_demos/tree/master/toggleButtonDemo

常用屬性說明

屬性名

用途

ohos:width

設定控制元件寬度,可設定為:match_parent(和父控制元件一樣),match_content(按照內容自動伸縮),設定固定值(如200vp)

ohos:height

設定控制元件高度,可設定為:match_parent(和父控制元件一樣),match_content(按照內容自動伸縮),設定固定值(如200vp)

ohos:layout_alignment

在父控制元件內對齊方式,可選值:left:居左;start:居左;center:居中;right:居右;end:居右

ohos:background_element

設定背景,可以是色值(如#FF0000)或圖片等

ohos:visibility

可選值: visible(顯示), invisible(隱藏,但是仍佔據UI空間),hide(隱藏,且不佔UI空間)

ohos:text_size

設定字號

ohos:text_color_on

設定選中時,文字顏色,樣例:ohos:text_color_on=“#FF0000”,

ohos:text_color_off

設定未選中時,文字顏色,樣例:ohos:text_color_off=“#FF0000”,

ohos:text_state_on

設定選中時文字,樣例:ohos:text_state_on=“ON”

ohos:text_state_off

設定未選中時文字,樣例: ohos:text_state_off=“OFF”

ohos:marked

設定是否選中,可選值:true:選中;false:未選中

更多屬性及實際效果,可以在開發工具裡自行體驗。