通过 Switch
组件,用户可以在两种状态之间切换:选中
并将其选中在您的应用中,您可以使用开关让用户执行某一项操作
以下:
- 开启或关闭某项设置。
- 启用或停用某项功能。
- 选择一个选项。
该组件包含两个部分:滑块和滑道。拇指是可拖动的 部分,音轨是背景。用户可以拖动滑块 以更改开关的状态。他们也可以点按 将其选中并清除。
![浅色模式和深色模式下的 Switch 组件示例。](https://developer.android.google.cn/static/develop/ui/compose/images/components/switches.png?authuser=5&hl=sr)
基本实现方法
如需了解完整的 API 定义,请参阅 Switch
参考文档。以下是
您可能需要使用的一些关键参数:
checked
:开关的初始状态。onCheckedChange
:当 切换更改。enabled
:开关是处于启用状态还是处于停用状态。colors
:开关使用的颜色。
以下示例是 Switch
可组合项的最小实现。
@Composable fun SwitchMinimalExample() { var checked by remember { mutableStateOf(true) } Switch( checked = checked, onCheckedChange = { checked = it } ) }
如果未选中,此实现如下所示:
![处于未选中状态的基本开关。](https://developer.android.google.cn/static/develop/ui/compose/images/components/switch-deactivated.png?authuser=5&hl=sr)
选中后,外观如下:
![一个已选中的基本开关。](https://developer.android.google.cn/static/develop/ui/compose/images/components/switch.png?authuser=5&hl=sr)
高级实现
在实施更高级的 包括:
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 } ) }
在此实现中,未选中的外观与 。不过,选中后,此实现将显示为 如下:
![处于选中状态时,可使用 thumbContent 参数显示自定义图标的开关。](https://developer.android.google.cn/static/develop/ui/compose/images/components/switch-icon.png?authuser=5&hl=sr)
自定义颜色
以下示例演示了如何使用颜色参数 更改开关滑块和滑道的颜色,同时考虑 开关处于选中状态
@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, ) ) }
此实现如下所示:
![一个开关,它使用颜色参数来显示开关,且滑块和图钉都有自定义颜色。](https://developer.android.google.cn/static/develop/ui/compose/images/components/switch-colors.png?authuser=5&hl=sr)