单选按钮设为选中

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

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

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

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

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

UnselectedColor:单选按钮在未选中和启用时使用的颜色。

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

使用“选定”在“选定”和“未选定”之间切换按钮的当前状态。使用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)}

在上面的代码中，我们在Row(线性水平)布局中添加了两个组合项RadioButton和Text，实现了通过RadioButton显示文本的效果。使用Spacer添加间隔，在Modifier.clickable的行中，还可以在单击整个布局时更改RadioButton的状态，如下图所示:

显示文本效果

我们知道在Android开发中给RadioGroup添加多个radio button可以实现在多个选项中只选择一个单选按钮的效果，但是在Jetpack Compose中没有这样的实现，需要我们自己自定义一个组合。

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

在上面的代码中，首先，我们创建一个新的水果集合，并使用集合中的选项来表示每个单选按钮的索引。接下来，创建selectedButton状态以记住当前选择的按钮。默认情况下，第一个按钮处于选中状态。使用for循环在循环的每次迭代中将RadioButton添加到列中。每次使用循环时，我们判断selectedButton的值是否是当前的RadioButton，然后将isSelected的值赋给RadioButton。每次用户点击按钮时，你都会改变按钮的选中状态。这将触发重新编译，您的用户界面将被更新！如下图:

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

版权声明:本文内容由网友提供，文中观点仅代表作者本人。本站仅提供信息存储空服务，不拥有所有权并承担相关法律责任。如果发现本网站涉嫌抄袭侵权/非法内容，请发邮件举报。一经核实，本网站将被立即删除。