借助 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 } ) }
在此实现中,未选中时的显示效果与上一部分中的示例相同。不过,检查后,此实现会显示如下所示:
自定义颜色
以下示例演示了如何使用 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, ) ) }
此实现如下所示: