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

在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(线性水平)布局中添加了RadioButtonText两个组合项,实现RadioButton显示文字的效果,使用Spacer添加间隔,在RowModifier.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之间切换状态。这样就实现了我们的单选效果。

(0)

相关推荐

  • 能过安检的防身武器(中国合法十大防身武器)

    生活中的危险随时都存在,当我们受到攻击时合法的回击就很重要,不合法的回击往往自己也会付出代价,下面跟小编一起来看一下中国十大合法自卫武器吧。 中国十大合法自卫武器 1. 笔 第一个…

    2022年4月13日
    158
  • 王老吉新款饮料 王老吉凉茶价格表

    近日,据媒体报道,有网友注意到,天猫平台王老吉旗舰店上线“百家姓”版本的王老吉,包括“李老吉”、“陈老吉”、“杨老吉”、“赵老吉”等。据介绍,此次只是在包装上进行更新,产品仍是王老…

    2022年2月14日
    114
  • 中山市的中心城区是哪里 中山市哪个区最繁华

    今天刷到这个抖音,近几年中山的商圈也是非常多的,大家都来看一下,这是你平时逛的商场吗? 第一名:石岐大信新都汇 路过必堵的商场,因为餐饮便宜,商场便宜,关键在旧城区中心点,当年大信…

    2022年4月16日
    36
  • 江苏盐城特产 盐城有哪些特色小吃

    盐城的特色小吃有鱼汤面、鯮鱼饼、藕粉圆子、奇园蟹黄包、首乌糕、阜宁大糕。 1、奇园蟹黄包   奇园蟹黄包是江苏盐城的特色小吃,据记载,至今已经有着三百多年的历史了,选用盐城西乡湖中…

    2022年5月17日
    4
  • 犹太人干过的坏事(犹太人为什么不受欢迎)

    以色列到底想要做什么,犹太人为什么对巴勒斯坦地区这么执着,犹太人为什么这么招国际社会谴责呢? 1840 至 1842 年英国发动第一次鸦片战争,中国战败,逐渐沦为半殖民地半封建社会…

    2022年4月5日
    95
  • 苹果手机用的蓝牙耳机 苹果手机专用耳机价格

    从Airpods诞生开始,苹果便一举开创了真无线蓝牙耳机时代。随着近两年安卓厂商在该领域的穷追猛赶,虽然其价格优势巨大,但Airpods系列依旧拥有独一无二的市场统治力,特别是它作…

    2022年2月13日
    58
  • 40元免三单是真的吗 拼多多40元全额返微信零钱

    拼多多是我们经常使用的电商购物平台,相比于淘宝和京东,拼多多的商品更加的便宜实惠,但是有时候平台也会推出下单全额返的活动,可以全部返还下单金额,这对于消费者来说有很大的吸引力,但是…

    2021年11月22日
    3.5K
分享本页
返回顶部