设置radiobutton选中(QRadiobutton设置选中)

请用语音读文章

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

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

我们用非常简洁的代码就创建了一个RadioButton。如下图：

RadioButton

此时的RadioButton没有任何的效果。也不能点击。

接下来。我们要为RadioButton添加一个点击状态并设置RadioButton的不同状态的样式。

valisSelected=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没有设置文字的属性。要想使其显示文字。就要使用组合项来实现。

valisSelected=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
funMyRadioButtonList(context:Context){
valfruits=listOf("苹果","枇杷","樱桃","草莓")
valselectedButton=remember{mutableStateOf(fruits.first())}

Row(){
fruits.forEach{
valisSelected=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之间切换状态。这样就实现了我们的单选效果。

以上就是由优质生活领域创作者 生活常识网 整理编辑的，如果觉得有帮助欢迎收藏转发~