android compose RadioButton 单选按钮 使用
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时onClicklambda 函数会将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 : maoning20080808163.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) ) } } } } }