Compose UI 之 Checkbox 复选框 & RadioButton 单选框

最新推荐文章于 2025-09-21 11:15:28 发布

原创

最新推荐文章于 2025-09-21 11:15:28 发布 · 1.6k 阅读

标签

#Android #Compose UI

本文介绍了Android Compose UI中的Checkbox复选框和RadioButton单选框。Checkbox适用于多选，RadioButton用于单选，两者都具有高度可定制性，能够适应不同布局和屏幕尺寸，为用户提供直观的交互体验。

Checkbox 复选框 & RadioButton 单选框

Checkbox 复选框提供了在多个选项中选择一个或多个选项的作用。

RadioButton 单选框提供了在多个选项中只能选择一个选项的作用。

下面就分别来介绍下 Android Compose UI 库中的 Checkbox 复选框和 RadioButton 单选框。

RadioButton

RadioButton 是一个用于在用户界面中创建单选按钮的组件。单选按钮通常用于在多个选项中选择一个，与其他单选按钮组合使用时，它们表现为互斥的：用户只能选择其中的一个。

RadioButton 组件非常灵活，可以轻松地与各种布局和修饰符结合使用，以实现所需的用户界面设计。它允许开发者通过参数自定义其外观和行为，如选中状态、颜色、大小等。

与传统的 Android View 系统相比，Compose 中的 RadioButton 提供了更简洁、声明式的方式来创建和维护用户界面。它适用于各种屏幕大小和分辨率，可以轻松地适应不同的设备和配置。

下面是 RadioButton 的声明

@Composable
fun RadioButton(
    selected: Boolean,
    onClick: (() -> Unit)?,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: RadioButtonColors = RadioButtonDefaults.colors(),
    interactionSource: MutableInteractionSource? = null
): Unit

参数	类型	描述
selected	Boolean	它是一个布尔值 (`Boolean`)，用于指示单选按钮当前是否被选中。如果 `selected` 为 `true`，则单选按钮会被绘制为选中状态；如果为 `false`，则为未选中状态。
onClick	(() -> Unit)?	它是一个可选的 Lambda 表达式（`(() -> Unit)?`），当用户点击单选按钮时会被调用。你可以在这个 Lambda 表达式中编写当用户点击单选按钮时应执行的代码。
modifier	Modifier	它是一个 `Modifier` 类型的参数，用于修改或增强单选按钮的布局或行为。`Modifier` 是 Compose 中一个非常核心的概念，用于处理布局调整、大小、位置、绘制层等各种属性。
enabled	Boolean	它是一个布尔值 (`Boolean`)，用于指示单选按钮是否可以被用户交互。如果 `enabled` 为 `true`，则单选按钮可以被点击和选中；如果为 `false`，则单选按钮将显示为禁用状态，无法响应用户的交互。
colors	RadioButtonColors	它是一个 `RadioButtonColors` 类型的参数，用于定义单选按钮的不同颜色属性，比如选中状态的颜色、未选中状态的颜色等。通过传递自定义的 `RadioButtonColors` 对象，你可以很容易地自定义单选按钮的视觉样式。
interactionSource	MutableInteractionSource?	它是一个可选的 `MutableInteractionSource?` 类型的参数，用于处理单选按钮的交互状态（如被按下、获得焦点等）。这个参数通常用于与可访问性服务（如屏幕阅读器）交互，以及实现更复杂的交互效果。如果你不需要处理这些交互状态，可以忽略这个参数。

下面通过示例来说明它的使用。

示例如下，修饰符 selectableGroup() 将若干个 RadioButton 归为一组，并确保正确的可达性。

@Composable
fun RadioButtonDemo() {
   
   
    val radioOptions = listOf("男", "女")
    val (selectedOption, onOptionSelected) = remember {
   
    mutableStateOf