在Jetpack Compose中用于制作单选按钮的可组合函数名为RadioButton。单选按钮是用户可以选择的小圆形按钮。一次只能选择一个选项。下面向您介绍如何使用RadioButton，如何实现多个RadioButton中一次只能选择一个选项的效果。
RadioButton(selected = false, onClick = { /*TODO*/ })我们用非常简洁的代码就创建了一个RadioButton，如下图：
RadioButton
此时的RadioButton没有任何的效果，也不能点击。
接下来，我们要为RadioButton添加一个点击状态并设置RadioButton的不同状态的样式。
val isSelected = remember {mutableStateOf(false)}
RadioButton(
colors = RadioButtonDefaults.colors(
selectedColor = selectedColor1,
unselectedColor = unselectedColor1,
disabledColor = disabledColor1
),
enabled = true,
selected = isSelected.value,
onClick = { isSelected.value = !isSelected.value})在上面的代码中，我们新建了一个isSelected变量来保存RadioButton的点击状态，使用colors设置RadioButton的样式，这里使用RadioButtonDefaults实例，并使用所需的背景色作为参数对其调用colors方法。
selectedColor：选中并启用时用于单选按钮的颜色
unselectedColor：未选择并启用时用于单选按钮的颜色。
disabledColor：禁用时用于单选按钮的颜色。
使用selected在“选定”和“未选定”之间切换按钮的当前状态。使用enabled控制单选按钮的启用状态。onClick单击RadioButton时要调用的回调，在回调中更改状态的值。如下图：
在Jetpack Compose中，RadioButton没有设置文字的属性，要想使其显示文字，就要使用组合项来实现。
val isSelected = remember {mutableStateOf(false)}
Row(
modifier = Modifier.clickable {
isSelected.value = !isSelected.value
}) {
RadioButton(
colors = RadioButtonDefaults.colors(
selectedColor = selectedColor1,
unselectedColor = unselectedColor1,
disabledColor = disabledColor1
),
enabled = true,
selected = isSelected.value,
onClick = { isSelected.value = !isSelected.value })
Spacer(modifier = Modifier.width(2.dp))
Text(text = text)
}在上面的代码中，我们在Row(线性水平)布局中添加了RadioButton和Text两个组合项，实现RadioButton显示文字的效果，使用Spacer添加间隔，在Row的Modifier.clickable中，当点击整个布局也可以更改RadioButton的状态，如下图：
显示文字效果
我们知道在Android开发中向RadioGroup中添加多个RadioButton，可以实现多个选项中只有一个RadioButton选中的效果，但在Jetpack Compose中没有这样的实现，我们需要自己自定义一个组合。
@Composable
fun MyRadioButtonList(context: Context){
val fruits = listOf("苹果", "枇杷", "樱桃", "草莓")
val selectedButton = remember { mutableStateOf(fruits.first()) }
Row() {
fruits.forEach {
val isSelected = it == selectedButton.value
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.clickable(onClick = {
selectedButton.value = it
Toast.makeText(context, "您点击了${it}", Toast.LENGTH_SHORT).show()
})
) {
RadioButton(
colors = RadioButtonDefaults.colors(
selectedColor = selectedColor1,
unselectedColor = unselectedColor1,
disabledColor = disabledColor1
),
selected = isSelected,
onClick = {
selectedButton.value = it
Toast.makeText(context, "您点击了${it}", Toast.LENGTH_SHORT).show()
})
Spacer(modifier = Modifier.width(2.dp))
Text(text = it)
}
}
}
}在上面的代码中，首先，我们新建了一个fruits集合，我们用集合中的选项表示每个单选按钮的索引。接下来，创建一个selectedButton状态，以记住当前选择的按钮。默认情况下，选择第一个按钮。使用for循环，在循环的每次迭代中向列添加一个RadioButton。每次循环的使用我们判断selectedButton的值是否是当前的RadioButton，然后将isSelected的赋给RadioButton，每次用户点击按钮时，您都会更改在状态中选择的按钮。这将触发重新编译，您的UI将更新！如下图：
默认情况下会选择第一个RadioButton。选择另一个RadioButton时，可以看到在RadioButton之间切换状态。这样就实现了我们的单选效果。
版权声明：本文内容由网友提供，该文观点仅代表作者本人。本站（http://www.zengtui.com/）仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 3933150@qq.com 举报，一经查实，本站将立刻删除。
版权声明：本文内容由作者小仓提供，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至907991599@qq.com 举报，一经查实，本站将立刻删除。如若转载，请注明出处：https://www.shaisu.com/241101.html
