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(
                    painter = rememberVectorPainter(AppIcons.Check),
                    contentDescription = null,
                    modifier = Modifier.size(SwitchDefaults.IconSize),
                )
            }
        } else {
            null
        }
    )
}
Switch.kt

在這個實作中，未勾選的外觀與上一節的範例相同。不過，如果勾選這個選項，導入方式會如下所示：

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

自訂顏色

以下範例說明如何使用 colors 參數，根據切換鈕是否勾選，變更切換鈕的滑桿和軌道顏色。

@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 UI 說明文件