Switch

通过 Switch 组件，用户可以在两种状态之间切换：选中 并将其选中在您的应用中，您可以使用开关让用户执行某一项操作 以下：

• 开启或关闭某项设置。
• 启用或停用某项功能。
• 选择一个选项。

该组件包含两个部分：滑块和滑道。拇指是可拖动的 部分，音轨是背景。用户可以拖动滑块 以更改开关的状态。他们也可以点按 将其选中并清除。

图 1. 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

如果未选中，此实现如下所示：

图 2. 未勾选的开关。

选中后，外观如下：

图 3. 选中的开关。

高级实现

在实施更高级的 包括：

• thumbContent：使用此选项可自定义缩略图的外观 则选中该复选框
• colors：使用此选项可自定义轨迹和滑块的颜色。

自定义缩略图

您可以为 thumbContent 形参传递任何可组合项来创建自定义 拇指。下例中的开关使用自定义图标作为其按钮 Thumb：

@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. 带有自定义勾选图标的开关。

自定义颜色

以下示例演示了如何使用颜色参数 更改开关滑块和滑道的颜色，同时考虑 开关处于选中状态

@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 界面文档