Compose UI 之 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

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

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

@Composable
fun RadioButtonDemo() {
    val radioOptions = listOf("男", "女")
    val (selectedOption, onOptionSelected) = remember { mutableStateOf(radioOptions[0]) }
    Column(modifier=Modifier.fillMaxSize().selectableGroup()) {
        radioOptions.forEach { text ->
            Row(modifier = Modifier.fillMaxWidth().height(56.dp)
                    .selectable(selected = (text == selectedOption), onClick = { onOptionSelected(text) }, role = Role.RadioButton)
                    .padding(horizontal = 16.dp),
                verticalAlignment = Alignment.CenterVertically
            ) {
                RadioButton(selected = (text == selectedOption), onClick = null)
                Text(text = text, style = MaterialTheme.typography.bodyLarge, modifier = Modifier.padding(start = 16.dp))
            }
        }
    }
}

Compose UI 中的 RadioButton 是一种用于创建单选按钮的组件，它允许用户在多个选项中选择一个。它具有高度的可定制性，开发者可以通过参数设置其外观和行为，如选中状态、颜色等。RadioButton 组件易于与其他 Compose UI 元素集成，可以灵活地适应不同的布局和屏幕尺寸，为用户提供直观且友好的单选交互体验。

Checkbox

Checkbox 用于多选或者打开/关闭某项设置。Compose 中的 Checkbox 与 View 系统中的 Checkbox 最直接的不同，View 系统中的 Checkbox 可以设置文本信息及与文本相关的各种属性值，因为在继承关系中它最后继承自 TextView ，而 Compose 中的 Checkbox 只是一个复选框，不包含文本部分，这样更单纯，更注重状态的变化。

Checkbox 的声明如下

@Composable
fun Checkbox(
    checked: Boolean,
    onCheckedChange: ((Boolean) -> Unit)?,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: CheckboxColors = CheckboxDefaults.colors(),
    interactionSource: MutableInteractionSource? = null
): Unit

Checkbox 通常用于以下场景：

• 设置页中打开/关闭一个功能。例如，一个应用提供一个 Checkbox，让用户选择是否接收推送通知。
• 表单输入。例如，一个问卷调查应用用多个 Checkbox 来让用户选择他们的兴趣爱好。
• 列表选项。例如，一个购物应用显示一个商品列表，每个商品旁边都有一个 Checkbox，允许用户选择他们想要购买的商品。
• 筛选。例如，一个音乐应用，在歌曲过滤列表中，可以选择多个过滤条件来筛选出想要的音乐。

下面是 Checkbox 的使用示例。

1. 配合状态的 Checkbox。

   @Composable
   fun CheckboxSample() {
       val (checkedState, onStateChange) = remember { mutableStateOf(true) }
       Row(
           modifier = Modifier.fillMaxWidth().height(60.dp)
               .toggleable(value = checkedState, onValueChange = { onStateChange(!checkedState) }, role = Role.Checkbox)
               .padding(horizontal = 16.dp),
           verticalAlignment = Alignment.CenterVertically
       ) {
           Checkbox(checked = checkedState, onCheckedChange = null)
           Text(text=if (checkedState) "打开" else "关闭",style = MaterialTheme.typography.bodyLarge,modifier=Modifier.padding(start=16.dp))
       }
   }
   

   

2. 列表中的 Checkbox。

   @Composable
   fun CheckboxListSample() {
       val checklistItems = remember {
           // 记录状态列表
           mutableStateListOf(
               ChecklistItem("Item 1"),
               ChecklistItem("Item 2"),
               ChecklistItem(title = "Item 3", isChecked = true),
           )
       }
       LazyColumn {
           // 依据 item 数量添加 composable 组件。
           items(checklistItems.size) { index ->
               // 一个 item 的的组件
               Row(
                   modifier = Modifier
                       .fillMaxWidth()
                       .padding(PaddingValues(horizontal = 10.dp, vertical = 5.dp)),
                   verticalAlignment = Alignment.CenterVertically
               ) {
                   // 开始的 Checkbox 组件。
                   Checkbox(
                       checked = checklistItems[index].isChecked,
                       onCheckedChange = { isChecked ->
                           checklistItems[index] = checklistItems[index].copy(isChecked = isChecked)
                       }
                   )
                   // 接着一个 Text 组件。
                   Text(text = checklistItems[index].title, fontSize = 16.0.sp, fontWeight = FontWeight.Bold)
   
               }
           }
       }
   }
   

   

Checkbox 组件是一个可复用的 UI 元素，它允许用户在多个选项中选择一个或多个。 Checkbox 通常与文本一起显示，以描述选项的内容。在Compose 中，Checkbox 可以轻松地与其他组件组合和定制，以创建丰富和动态的用户界面。通过使用 Checkbox，开发者可以提供直观且易于使用的选择机制，增强应用程序的用户体验。

总结

Checkbox 和 RadioButton 都是用于用户交互的常用组件，但它们的功能和用途有所不同。
Checkbox 是一个可以勾选或取消勾选的复选框，用户可以选择多个选项。它通常用于表示一系列可选项目，用户可以根据自己的需要选择任意数量的选项。在 Android Compose 的视觉呈现上，Checkbox 可能具有特定的样式和动画效果，以符合 Material Design 或其他设计规范。

RadioButton 则是一个单选按钮，它表示一组互斥的选项。在一组 RadioButton 中，用户只能选择其中一个选项，一旦选中某个按钮，其他按钮会自动取消选中状态。RadioButton 在视觉呈现上通常以圆形表示，并且通常放在 RadioGroup 中使用，以体现其“单选”的特性。

Checkbox 允许用户选择多个选项，而 RadioButton 则用于在互斥的选项中进行单一选择。它们在 Android Compose 用户界面中提供了不同的交互方式和视觉表现，开发者可以根据具体需求选择合适的组件来实现所需的功能。