跳转到内容

RadioButton

RadioButton 是 Miuix 中的基础选择组件,支持两种状态:选中和未选中。选中时显示对勾动画指示器,未选中时不显示任何指示器。适用于单选场景,即从一组选项中只能选择一个。

引入

kotlin
import top.yukonga.miuix.kmp.basic.RadioButton

基本用法

RadioButton 组件通常在互斥选择组中使用:

kotlin
var selectedIndex by remember { mutableIntStateOf(0) }

Column {
    SuperRadioButton(
        title = "选项 A",
        selected = selectedIndex == 0,
        onClick = { selectedIndex = 0 }
    )
    SuperRadioButton(
        title = "选项 B",
        selected = selectedIndex == 1,
        onClick = { selectedIndex = 1 }
    )
}

组件状态

禁用状态

kotlin
RadioButton(
    selected = true,
    onClick = null,
    enabled = false
)

属性

RadioButton 属性

属性名类型说明默认值是否必须
selectedBoolean单选按钮是否被选中-
onClick(() -> Unit)?点击时的回调;为 null 时组件不可交互-
modifierModifier应用于单选按钮的修饰符Modifier
colorsRadioButtonColors单选按钮的颜色配置RadioButtonDefaults.radioButtonColors()
enabledBoolean单选按钮是否可交互true

RadioButtonDefaults 对象

RadioButtonDefaults 对象提供了 RadioButton 组件的默认颜色配置。

方法

方法名类型说明
radioButtonColors()RadioButtonColors创建单选按钮的默认颜色配置

RadioButtonColors 类

属性名类型说明
selectedColorColor选中状态时对勾颜色
disabledSelectedColorColor禁用且选中状态时对勾颜色

进阶用法

自定义颜色

kotlin
var selected by remember { mutableStateOf(false) }

RadioButton(
    selected = selected,
    onClick = { selected = !selected },
    colors = RadioButtonDefaults.radioButtonColors(
        selectedColor = Color.Red
    )
)

在列表中使用

kotlin
val options = listOf("选项 A", "选项 B", "选项 C")
var selectedIndex by remember { mutableIntStateOf(0) }

Card {
    options.forEachIndexed { index, option ->
        SuperRadioButton(
            title = option,
            selected = selectedIndex == index,
            onClick = { selectedIndex = index }
        )
    }
}

变更日志

基于 Apache-2.0 许可发布