Switch
元件可讓使用者在兩個狀態之間切換:已勾選
並取消勾選。在應用程式中,您可以使用切換鈕讓使用者執行其中一項操作
包括:
- 開啟或關閉設定。
- 啟用或停用功能。
- 選取所需選項。
這個元件包含「指標」和「軌道」兩個部分。拇指是可以拖曳的 和音軌背景。使用者可以拖曳指標 左右切換開關狀態。也可以輕觸 進行檢查和清除動作
![淺色和深色模式的切換元件範例。](https://developer.android.google.cn/static/develop/ui/compose/images/components/switches.png?authuser=0000&hl=zh-tw)
基本導入
如需完整 API 定義,請參閱 Switch
參考資料。以下是
您可能需要使用的部分重要參數:
checked
:切換作業的初始狀態。onCheckedChange
:系統在發生問題時呼叫的回呼。 開關變更。enabled
:啟用或停用切換按鈕。colors
:切換鈕的顏色。
以下範例是最基本的 Switch
可組合項實作方式。
@Composable fun SwitchMinimalExample() { var checked by remember { mutableStateOf(true) } Switch( checked = checked, onCheckedChange = { checked = it } ) }
未勾選時,這項實作方式會如下所示:
![未勾選的基本切換按鈕。](https://developer.android.google.cn/static/develop/ui/compose/images/components/switch-deactivated.png?authuser=0000&hl=zh-tw)
勾選後看起來會像這樣:
![已勾選的基本外接切換裝置。](https://developer.android.google.cn/static/develop/ui/compose/images/components/switch.png?authuser=0000&hl=zh-tw)
進階導入
導入進階升級時要使用的主要參數 切換鈕如下:
thumbContent
:可用於自訂拇指外觀的時機 已勾選colors
:這可用來自訂音軌和指標的顏色。
自訂縮圖
您可以為 thumbContent
參數傳遞任何可組合函式,以便建立自訂
拇指。以下是使用自訂圖示的切換鈕範例
縮圖:
@Composable fun SwitchWithIconExample() { var checked by remember { mutableStateOf(true) } Switch( checked = checked, onCheckedChange = { checked = it }, thumbContent = if (checked) { { Icon( imageVector = Icons.Filled.Check, contentDescription = null, modifier = Modifier.size(SwitchDefaults.IconSize), ) } } else { null } ) }
在這個實作方式中,未勾選的外觀會與 請參閱上一節的說明不過,勾選時,這項實作會顯示為 如下:
![勾選時,使用 thumbContent 參數顯示自訂圖示的切換鈕。](https://developer.android.google.cn/static/develop/ui/compose/images/components/switch-icon.png?authuser=0000&hl=zh-tw)
自訂顏色
以下範例說明如何使用 color 參數 變更開關的指針和軌跡顏色,請考量 切換按鈕已勾選。
@Composable fun SwitchWithCustomColors() { var checked by remember { mutableStateOf(true) } Switch( checked = checked, onCheckedChange = { checked = it }, colors = SwitchDefaults.colors( checkedThumbColor = MaterialTheme.colorScheme.primary, checkedTrackColor = MaterialTheme.colorScheme.primaryContainer, uncheckedThumbColor = MaterialTheme.colorScheme.secondary, uncheckedTrackColor = MaterialTheme.colorScheme.secondaryContainer, ) ) }
實作內容如下所示:
![使用顏色參數的切換鈕,顯示含有自訂顏色的切換按鈕,方便拇指和堆疊。](https://developer.android.google.cn/static/develop/ui/compose/images/components/switch-colors.png?authuser=0000&hl=zh-tw)