Switch
元件可讓使用者在兩種狀態之間切換:已勾選和未勾選。在應用程式中,您可以使用切換鈕讓使用者執行下列任一操作:
- 開啟或關閉設定。
- 啟用或停用功能。
- 選取所需選項。
這個元件包含「指標」和「軌道」兩個部分。拇指是開關的可拖曳部分,音軌則是背景。使用者可以將拇指向左或向右拖曳,即可變更切換鈕的狀態。使用者也可以輕觸切換鈕 進行查看和清除
基本導入
如需完整 API 定義,請參閱 Switch
參考資料。以下列舉幾個您可能需要使用的重要參數:
checked
:切換作業的初始狀態。onCheckedChange
:切換開關狀態變更時呼叫的回呼。enabled
:啟用或停用切換按鈕。colors
:切換鈕的顏色。
以下範例是最基本的 Switch
可組合項實作方式。
@Composable fun SwitchMinimalExample() { var checked by remember { mutableStateOf(true) } Switch( checked = checked, onCheckedChange = { checked = it } ) }
未勾選時,這項實作方式會如下所示:
勾選後看起來會像這樣:
進階導入
實作進階切換按鈕時,您可能會想要使用的主要參數如下:
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 } ) }
在這個實作中,取消勾選的外觀會與上一節的例子相同。不過,勾選後,這項實作內容會如下所示:
自訂顏色
以下範例說明如何使用顏色參數來變更切換按鈕的指標和軌跡顏色,並考量是否已勾選切換按鈕。
@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, ) ) }
實作內容如下所示: