切换

借助 Switch 组件,用户可以在两种状态(已选中和未选中)之间切换。在应用中,您可以使用开关让用户执行以下任一操作:

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

该组件由两个部分组成:滑块和滑道。滑块是开关的可拖动部分,滑道是背景。用户可以将滑块向左或向右拖动,以更改开关的状态。用户还可以点按开关进行检查和清除。

浅色模式和深色模式下的开关组件示例。
图 1. 开关组件。

基本实现方法

如需了解完整的 API 定义,请参阅 Switch 参考文档。以下是您可能需要使用的部分关键参数:

  • checked:开关的初始状态。
  • onCheckedChange:在开关状态发生变化时调用的回调。
  • enabled:开关是启用还是停用。
  • colors:开关使用的颜色。

以下示例是 Switch 可组合项的最小实现。

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

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

如果未选中,此实现如下所示:

处于未选中状态的基本开关。
图 2. 未选中开关。

勾选后,其显示如下:

处于选中状态的基本开关。
图 3. 已选中状态的开关。

高级实现

在实现更高级的 switch 时,可能需要使用的主要参数包括:

  • 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
        }
    )
}

在此实现中,未选中时的显示效果与上一部分中的示例相同。不过,检查后,此实现会显示如下所示:

一个开关,使用 thumbContent 参数在选中时显示自定义图标。
图 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,
        )
    )
}

此实现如下所示:

一个开关,它使用颜色参数来显示开关,且滑块和图钉都有自定义颜色。
图 5. 采用自定义颜色的开关。

其他资源