Compose系列文章,请点原文阅读。原文,是时候学习Compose了!

0、介绍

表示两个状态的组件,包含已选中和未选中状态

在XML中RadioButton一般需要配合RadioGroup来实现单选功能。但是在Compose中,完全没有了RadioGroup的概念,因为你整个视图是数据驱动的,所以只要保证数据是你想要的即可,无论是单选还是多选,都可以实现。

而且需要注意一点,这个RadioButton就是一个Button,不会像XML中的还有text属性,Compose中的就是一个单独的按钮,剩下的布局你可以自己定义,我们下文看代码实现。

1、属性一览

【目前基于alpha10版本】该函数如下:

@Composable fun RadioButton(
    selected: Boolean, 
    onClick: () -> Unit, 
    modifier: Modifier = Modifier, 
    enabled: Boolean = true, 
    interactionState: InteractionState = remember { InteractionState() }, 
    colors: RadioButtonColors = RadioButtonDefaults.colors()
): Unit

属性参数含义:

参数含义
selected: Boolean按钮的选中状态
onClick: () -> Unit单击RadioButton的回调
modifier: Modifier = Modifier应用于布局的修饰符
enabled: Boolean = true控制RadioButton的启用状态。如果为false,则此按钮将不可选择,并以禁用的UI状态显示
interactionState: InteractionState = remember { InteractionState() }自定义按钮显示的不同状态
colors: RadioButtonColors = RadioButtonDefaults.colors()RadioButton在不同状态下的颜色

2、使用示例

我们直接定义一排单选按钮,首先定义了一些按钮项的显示文本内容,然后根据这些文本循环设置RadioButton,并组合Text控件。然后我们定义了选中状态seletedTag的默认值为Null,然后单击某个按钮时,设置为相应的值,代码如下:

@Composable
fun RadioButtonDemo() {
    val tags = arrayListOf("Java", "Kotlin", "XML", "Compose", "JetPack")
    var selectedTag = remember { mutableStateOf("Null") }

    Row() {
        tags.forEach {
            Row {
                RadioButton(
                    selected = it == selectedTag.value,
                    onClick = {
                        selectedTag.value = it
                    }
                )

                Text(text = it)
            }

            Spacer(modifier = Modifier.width(20.dp))
        }
    }
}

所以实现效果如下所示:

在这里插入图片描述

3、版本更新

  • 暂无

4、未解决问题

由于RadioButton是完全交由数据状态来处理的,所以我们可以很方便的设置为单选或者多选 的情况,这个大家可以自己尝试下,上面的代码仅仅只是示例代码。

GitHub 加速计划 / compose / compose
39
5
下载
compose - Docker Compose是一个用于定义和运行多容器Docker应用程序的工具,通过Compose文件格式简化应用部署过程。
最近提交(Master分支:4 个月前 )
8f644eea Signed-off-by: Nicolas De Loof <nicolas.deloof@gmail.com> 3 天前
56e92e34 Signed-off-by: Guillaume Lours <705411+glours@users.noreply.github.com> 3 天前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐