Switch
组件允许用户在两种状态之间切换:选中和未选中。在您的应用中,您可以使用开关来让用户执行以下操作之一:
- 开启或关闭某项设置。
- 启用或停用某项功能。
- 选择一个选项。
该组件包含两个部分:滑块和滑道。拇指是开关的可拖动部分,滑道是背景。用户可以向左或向右拖动拇指,以更改开关的状态。他们也可以点按开关进行检查并清除。
基本实现方法
如需了解完整的 API 定义,请参阅 Switch
参考文档。以下是您可能需要使用的一些关键参数:
checked
:开关的初始状态。onCheckedChange
:开关状态更改时调用的回调。enabled
:此开关是处于启用还是停用状态。colors
:用于切换的颜色。
以下示例是 Switch
可组合项的极简实现。
@Composable fun SwitchMinimalExample() { var checked by remember { mutableStateOf(true) } Switch( checked = checked, onCheckedChange = { checked = it } ) }
如果未选中此项,此实现如下所示:
下面是选中后的外观:
高级实现
在实现更高级的 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 } ) }
在此实现中,取消选中的外观与上一部分中的示例相同。不过,勾选后,此实现将如下所示:
自定义颜色
以下示例演示了如何使用颜色参数来更改开关滑块和滑道的颜色,同时考虑到开关是否处于选中状态。
@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, ) ) }
此实现如下所示: