Jetpack Compose Glimmer 中的切換按鈕

適用的 XR 裝置

這份指南可協助您為這類 XR 裝置打造體驗。

瞭解 XR 裝置類型 →

瞭解 XR 裝置類型 →

在 Jetpack Compose Glimmer 中，ToggleButton 是互動式元件，會根據勾選狀態改變外觀。切換按鈕經過最佳化，可搭配顯示眼鏡使用，提供清晰的形狀和顏色視覺轉換效果。這些轉場效果會指出動作或設定何時處於啟用狀態。

使用切換按鈕顯示可開啟或關閉的動作。與僅含圖示的切換按鈕不同，切換按鈕主要顯示文字內容，但支援選用圖示插槽，提供額外背景資訊。

如為其他用途，您也可以使用標準按鈕和圖示按鈕。

圖解

切換鈕包含可在不同狀態之間變形的容器，以及附有選用圖示的標籤。

大小

與標準按鈕類似，切換按鈕支援兩種大小變化：

切換按鈕預設值

根據預設，切換按鈕會使用 ToggleButtonDefaults.animateShape。這會在下列狀態之間建立平滑的轉場效果：

• 未勾選：GlimmerTheme.shapes.large (通常為 CircleShape)。
• 已勾選：ToggleButtonDefaults.CheckedShape (具有 RoundedCornerShape 個 20.dp 角)。

ToggleButtonColors 類別會管理下列狀態的色彩解析度：

• 未勾選：預設為 GlimmerTheme.colors.surface。
• 已勾選：預設為 GlimmerTheme.colors.surface。

動畫

切換按鈕的動畫預設值如下：

• animateShape：提供 Shape，可使用彈簧效果規格 (stiffness = 600f) 插補邊角大小。
• colors：工廠函式，可自訂兩種狀態的背景和內容顏色。
• CheckedShape：用於勾選狀態的靜態 RoundedCornerShape(20.dp)。
• contentPadding：沿用自 ButtonDefaults.contentPadding。

範例：切換按鈕

下列程式碼會建立基本切換按鈕：

@Composable
fun ToggleButtonSample() {
    var checked by remember { mutableStateOf(false) }
    val text = if (checked) "Toggle on" else "Toggle off"
    ToggleButton(checked = checked, onCheckedChange = { checked = it }) { Text(text) }
}
ToggleButtonSamples.kt

範例：含有前置圖示的切換按鈕

下列程式碼會建立含有前置圖示的切換按鈕：

@Composable
fun ToggleButtonWithLeadingIconSample() {
    var checked by remember { mutableStateOf(false) }
    val text = if (checked) "Toggle on" else "Toggle off"
    ToggleButton(
        checked = checked,
        leadingIcon = {
            Icon(if (checked) FavoriteIcon else OutlinedFavoriteIcon, "Localized description")
        },
        onCheckedChange = { checked = it },
    ) {
        Text(text)
    }
}
ToggleButtonSamples.kt