Compose RadioButton

RelinRan

已于 2024-12-20 14:30:59 修改

阅读量171

点赞数 2

分类专栏： Android Compose 文章标签： RadioButton Compose

于 2024-12-02 17:06:15 首次发布

本文链接：https://blog.youkuaiyun.com/u012127961/article/details/144193022

版权

Android Compose 专栏收录该内容

35 篇文章

订阅专栏

预览

在这里插入图片描述

代码

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.material.RadioButton
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

@Composable
@Preview
fun PreviewRadioButtonGroup(){
    RadioButtonGroup()
}

@Composable
fun RadioButtonGroup() {
    val options = listOf("Option 1", "Option 2", "Option 3")
    var selectedOption by remember { mutableStateOf(options[0]) }

    Column(
        modifier = Modifier.padding(16.dp),
        horizontalAlignment = Alignment.Start
    ) {
        // 显示选中的选项
        Text(
            text = "Selected Option: $selectedOption",
            modifier = Modifier.padding(top = 16.dp)
        )
        options.forEach { text ->
            Row(
                modifier = Modifier.padding(vertical = 4.dp)
                    .clickable{ selectedOption = text },//扩展row点击范围，点击文本也可以选中
                verticalAlignment = Alignment.CenterVertically
            ) {
                RadioButton(
                    selected = (text == selectedOption),
                    onClick = { selectedOption = text }
                )
                Text(
                    text = text,
                    modifier = Modifier.padding(start = 3.dp)
                )
            }
        }
    }

}