Switch
元件可讓使用者在兩種狀態之間切換:勾選和取消勾選。使用切換鈕讓使用者執行下列任一操作:
- 開啟或關閉設定。
- 啟用或停用功能。
- 選取所需選項。
元件包含兩個部分:拇指和軌道。拇指是切換鈕的可拖曳部分,而軌道則是背景。使用者可以將指標拖曳至左側或右側,以變更切換鈕的狀態。使用者也可以輕觸切換鈕來勾選和清除。
版本相容性
這個實作方式需要將專案 minSDK 設為 API 級別 21 以上。
依附元件
實作切換鈕
以下範例是 Switch
可組合項的最小實作項目:
結果
![未勾選的基本切換鈕。](https://developer.android.google.cn/static/develop/ui/compose/images/components/switch-deactivated.png?hl=zh-tw)
![已勾選的基本切換鈕。](https://developer.android.google.cn/static/develop/ui/compose/images/components/switch.png?hl=zh-tw)
建立自訂縮圖
您可以為 thumbContent
參數傳遞任何可組合項,以建立自訂縮圖。以下是使用自訂圖示做為滑鈕按鈕的範例:
結果
未勾選的顯示方式與上一節的範例相同。不過,勾選後,這項實作會顯示如下:
![使用 thumbContent 參數的切換鈕,在勾選時顯示自訂圖示。](https://developer.android.google.cn/static/develop/ui/compose/images/components/switch-icon.png?hl=zh-tw)
使用自訂顏色
使用 colors
參數變更切換鈕的拇指和軌跡顏色,並考量切換鈕是否已勾選。
結果
![使用 colors 參數的切換鈕,可顯示手動切換鈕和標記的自訂顏色。](https://developer.android.google.cn/static/develop/ui/compose/images/components/switch-colors.png?hl=zh-tw)
重點
基本參數:
checked
:切換按鈕的初始狀態。onCheckedChange
:當切換器狀態變更時,系統會呼叫的回呼。enabled
:切換鈕是否已啟用或停用。colors
:切換鈕使用的顏色。
進階參數
thumbContent
:用於自訂勾選時的拇指圖示外觀。colors
:用於自訂音軌和滑桿的顏色。
包含此指南的集合
本指南是精選的快速指南系列之一,涵蓋更廣泛的 Android 開發目標:
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=zh-tw)
顯示互動式元件
瞭解可組合函式如何讓您輕鬆根據 Material Design 設計系統,建立美觀的 UI 元件。
有問題或意見回饋嗎?
請前往常見問題頁面,瞭解快速指南或與我們聯絡,分享您的想法。