android compose RadioButton 单选按钮使用

使用 RadioButton 可组合项列出可用选项。将每个 RadioButton 选项及其标签封装在 Row 组件中，以便将它们分组在一起。

RadioButton 包含以下关键参数：

selected：指示单选按钮是否处于选中状态。
onClick：当用户点击单选按钮时，应用执行的 lambda 函数。如果此值为 null，则用户无法直接与单选按钮互动。
enabled：控制单选按钮是启用还是停用。用户无法与已停用的单选按钮互动。
interactionSource：用于观察按钮的互动状态，例如是否处于按下、悬停或聚焦状态。

代码要点

radioOptions 表示单选按钮的标签。
remember 可组合函数会创建一个状态变量 selectedOption 和一个用于更新该状态的函数 onOptionSelected。此状态保存所选单选按钮选项。
- mutableStateOf(radioOptions[0]) 将状态初始化为列表中的第一项。"通话"是第一个项目，因此是默认选中的单选按钮。
Modifier.selectableGroup() 可确保屏幕阅读器具有适当的无障碍功能行为。它会告知系统，此 Column 中的元素属于可选择的群组，从而实现适当的屏幕阅读器支持。
Modifier.selectable() 使整个 Row 充当单个可选择项。
- selected 用于指示当前 Row 是否根据 selectedOption 状态处于选中状态。
- 当用户点击 Row 时，onClick lambda 函数会将 selectedOption 状态更新为所点击的选项。
- role = Role.RadioButton 会告知无障碍服务，Row 的功能与单选按钮相同。
RadioButton(...) 会创建 RadioButton 可组合项。
- onClick = null 上的 RadioButton 改进了无障碍功能。这样可以防止单选按钮直接处理点击事件，并允许 Row 的 selectable 修饰符管理选择状态和无障碍功能行为。

复制代码

package com.wn.androidcomposedemo1.basegoogle

import android.os.Bundle
import android.util.Log
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.selection.selectable
import androidx.compose.foundation.selection.selectableGroup
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.RadioButton
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.wn.androidcomposedemo1.ui.theme.AndroidComposeDemo1Theme

/**
 * Author : wn
 * Email : maoning20080808@163.com
 * Date : 2026/6/27 20:20
 * Description : 单选按钮
 */
class RadioButtonActivity : ComponentActivity(){

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            AndroidComposeDemo1Theme() {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    RadioButtonSingleSelection(Modifier.padding(10.dp))
                }
            }
        }
    }

    @Preview
    @Composable
    fun RadioButtonSingleSelection(modifier: Modifier){
        val radioOptions = listOf("Java", "Kotlin", "Flutter", "Compose")
        val (selectedIndex, setSelectedIndex) = remember { mutableStateOf(0) }

        Column(modifier.selectableGroup(), horizontalAlignment = Alignment.CenterHorizontally) {
            Spacer(Modifier.height(20.dp))
            Text("单选", fontSize = 30.sp, color = Color.Red)
            Spacer(Modifier.height(20.dp))
            radioOptions.forEachIndexed { index, text ->
                Row(
                    Modifier
                        .fillMaxWidth()
                        .height(56.dp)
                        .selectable(
                            selected = (index == selectedIndex),
                            onClick = { setSelectedIndex(index) },
                            role = Role.RadioButton
                        )
                        .padding(horizontal = 16.dp),
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    //这里只是点击按钮会响应，可以改成点击整行都可以响应
                    RadioButton(
                        selected = (index == selectedIndex),
                        onClick = {
                            Log.d("AAA", "index =$index , value = $text")
                        }
                    )
                    Text(
                        text = text,
                        style = MaterialTheme.typography.bodyLarge,
                        modifier = Modifier.padding(start = 16.dp)
                    )
                }
            }
        }
    }
}

android compose RadioButton 单选按钮 使用

代码要点

android compose RadioButton 单选按钮使用