设置单选按钮选中

html单选按钮默认选中 radiobutton控件默认选中

用于在Jetpack中编写单选按钮的可组合函数名为RadioButton。单选按钮是用户可以选择的小圆形按钮。一次只能选择一个选项。下面介绍如何使用RadioButton以及如何实现多个RadioButton中一次只能选择一个选项的效果。

RadioButton(selected = false, onClick = { /*TODO*/ })

我们用非常简洁的代码创建了一个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的点击状态，并使用颜色来设置RadioButton的样式。这里，我们使用了radio button defaults的实例，并用所需的背景颜色作为参数调用它。

SelectedColor: 单选按钮被选中和启用时使用的颜色。

未选择的颜色:单选按钮未被选择和启用时使用的颜色。

DisabledColor: 单选按钮禁用时使用的颜色。

使用selected在“选中”和“未选中”之间切换按钮的当前状态。使用enabled来控制单选按钮的启用状态。onClick单击RadioButton时要调用的回调，其中状态的值被更改。如下图:

在Jetpack Compose中，RadioButton没有text set属性。如果想让它显示文本，就得用组合项来实现。

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

在上面的代码中，我们在行(线性水平)布局中添加了RadioButton和Text，实现RadioButton显示文本。在行的Modifier.clickable中，您还可以在单击整个布局时更改单选按钮的状态，如下图所示:

显示文本效果

我们知道在Android开发中给单选按钮组添加多个单选按钮可以达到在多个选项中只选择一个单选按钮的效果，但是在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。每当用户点击按钮，这将触发重新编译，你的用户界面将被更新！如下图:

默认情况下，第一个单选按钮处于选中状态。当选择另一个单选按钮时，可以看到状态可以在单选按钮之间切换。这样，我们的单选效果就实现了。