Switch

Switch 元件可讓使用者在兩個狀態之間切換：已勾選 並取消勾選。在應用程式中，您可以使用切換鈕讓使用者執行其中一項操作 包括：

• 開啟或關閉設定。
• 啟用或停用功能。
• 選取所需選項。

這個元件包含「指標」和「軌道」兩個部分。拇指是可以拖曳的 和音軌背景。使用者可以拖曳指標 左右切換開關狀態。也可以輕觸 進行檢查和清除動作

圖 1. 切換元件。

基本導入

如需完整 API 定義，請參閱 Switch 參考資料。以下是 您可能需要使用的部分重要參數：

• checked：切換作業的初始狀態。
• onCheckedChange：系統在發生問題時呼叫的回呼。 開關變更。
• enabled：啟用或停用切換按鈕。
• colors：切換鈕的顏色。

以下範例是最基本的 Switch 可組合項實作方式。

@Composable
fun SwitchMinimalExample() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        }
    )
}
Switch.kt

未勾選時，這項實作方式會如下所示：

圖 2. 切換按鈕未勾選。

勾選後看起來會像這樣：

圖 3. 已勾選的切換按鈕。

進階導入

導入進階升級時要使用的主要參數 切換鈕如下：

• 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
        }
    )
}
Switch.kt

在這個實作方式中，未勾選的外觀會與 請參閱上一節的說明不過，勾選時，這項實作會顯示為 如下：

圖 4. 具有自訂勾選圖示的切換按鈕。

自訂顏色

以下範例說明如何使用 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,
        )
    )
}
Switch.kt

實作內容如下所示：

圖 5. 自訂顏色的外接切換裝置。

其他資源

• Material Design 使用者介面說明文件