Switch

Switch 元件可讓使用者切換兩種狀態：已勾選和未勾選。在應用程式中，您可以透過切換按鈕讓使用者執行下列任一操作：

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

此元件包含兩個部分：指標和軌道。拇指是可拖曳的部分，軌道是背景。使用者可以將拇指向左或向右拖曳，藉此變更開關的狀態。使用者也可以輕觸切換按鈕來檢查及清除。

基本導入

如需完整的 API 定義，請參閱 Switch 參考資料。您可能需要使用的幾個主要參數如下：

• checked：切換鈕的初始狀態。
• onCheckedChange：切換狀態變更時呼叫的回呼。
• enabled：切換鈕是用於啟用或停用。
• colors：切換按鈕使用的顏色。

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

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

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

在未勾選時，此實作會如下所示：

勾選時的外觀如下：

進階導入作業

實作更進階切換鈕時，您可能會使用的主要參數如下：

• 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

在這個實作過程中，未勾選的外觀與上一節中的範例相同。不過，勾選後，此實作項目如下所示：

自訂顏色

以下範例說明如何使用顏色參數變更切換按鈕和軌道的顏色，並將切換鈕納入考量。

@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

此實作方式如下：

其他資源

• Material UI 文件