Jetpack Compose Glimmer 中的切换按钮

适用的 XR 设备

本指南可帮助您为以下类型的 XR 设备打造优质体验。

了解 XR 设备类型 →

展示眼镜

了解 XR 设备类型 →

在 Jetpack Compose Glimmer 中，ToggleButton 是一个交互式组件，其外观会根据选中状态而变化。切换按钮经过优化，可用于显示眼镜，以便在形状和颜色方面提供清晰的视觉过渡效果。这些过渡效果表示操作或设置何时处于有效状态。

使用切换按钮来显示可开启或关闭的操作。与仅包含图标的切换开关不同，切换按钮主要显示文本内容，但它支持可选的图标槽以提供更多上下文。

对于其他使用情形，您还可以使用标准按钮和图标按钮。

图 1. Jetpack Compose Glimmer 中切换按钮的示例，用于界面布局中的播放和暂停操作。

解剖学

切换按钮由在状态之间变形的容器和带有可选图标的标签组成。

部分	说明
容器	在圆形（未选中）和圆角矩形（已选中）之间添加动画效果。
标签	通常是 Text 可组合项。
图标（可选）	可因州而异的开头或结尾时段。

尺寸

与标准按钮类似，切换按钮支持两种尺寸变体：

大小	最小高度	默认使用政策
中	48.dp	默认的互动大小。
大	72.dp	主要或高强调切换开关。

切换按钮默认值

默认情况下，切换按钮使用 ToggleButtonDefaults.animateShape。这样一来，以下状态之间的过渡就会非常顺畅：

• 未选中：GlimmerTheme.shapes.large（通常为 CircleShape）。
• 已勾选：ToggleButtonDefaults.CheckedShape（具有 20.dp 个圆角的 RoundedCornerShape）。

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