分段按钮

使用分段按钮可让用户并排从一组选项中进行选择。 分段按钮有两种类型：

  • 单选按钮：让用户选择一个选项。
  • 多选按钮：让用户从 2 到 5 个项目中进行选择。对于更复杂的选项或超过 5 个选项，请使用条状标签。
系统会显示分段按钮组件。第一个按钮允许单选，而第二个按钮允许多选。
图 1. 单选按钮 (1) 和多选按钮 (2)。

API Surface

使用 SingleChoiceSegmentedButtonRow 和 MultiChoiceSegmentedButtonRow 布局创建分段按钮。这些布局可确保 SegmentedButton 的放置和大小正确无误，并共享以下关键参数：

  • space：调整按钮之间的重叠。
  • content：包含分屏按钮行的具体内容，通常是一系列 SegmentedButton。

创建单选分段按钮

以下示例展示了如何创建单选分段按钮：

@Composable
fun SingleChoiceSegmentedButton(modifier: Modifier = Modifier) {
    var selectedIndex by remember { mutableIntStateOf(0) }
    val options = listOf("Day", "Month", "Week")

    SingleChoiceSegmentedButtonRow {
        options.forEachIndexed { index, label ->
            SegmentedButton(
                shape = SegmentedButtonDefaults.itemShape(
                    index = index,
                    count = options.size
                ),
                onClick = { selectedIndex = index },
                selected = index == selectedIndex,
                label = { Text(label) }
            )
        }
    }
}
SegmentedButton.kt

代码要点

  • 使用 remember 和 mutableIntStateOf 初始化 selectedIndex 变量，以跟踪当前所选按钮的索引。
  • 定义表示按钮标签的 options 列表。
  • SingleChoiceSegmentedButtonRow 可确保用户只能选择一个按钮。
  • 在 forEachIndexed 循环内为每个选项创建一个 SegmentedButton：
    • shape 使用 SegmentedButtonDefaults.itemShape 根据按钮的索引和选项的总数定义按钮的形状。
    • onClick 使用点击的按钮的索引更新 selectedIndex。
    • selected 根据 selectedIndex 设置按钮的选择状态。
    • label 使用 Text 可组合项显示按钮标签。

结果

系统会显示一个包含“日”“月”和“周”选项的分段按钮组件。当前选择的是“日”选项。
图 2. 一个已选中一个选项的单选按钮。

创建多选分段按钮

以下示例展示了如何创建带有图标的多选分段按钮，以便用户选择多个选项：

@Composable
fun MultiChoiceSegmentedButton(modifier: Modifier = Modifier) {
    val selectedOptions = remember {
        mutableStateListOf(false, false, false)
    }
    val options = listOf("Walk", "Ride", "Drive")

    MultiChoiceSegmentedButtonRow {
        options.forEachIndexed { index, label ->
            SegmentedButton(
                shape = SegmentedButtonDefaults.itemShape(
                    index = index,
                    count = options.size
                ),
                checked = selectedOptions[index],
                onCheckedChange = {
                    selectedOptions[index] = !selectedOptions[index]
                },
                icon = { SegmentedButtonDefaults.Icon(selectedOptions[index]) },
                label = {
                    when (label) {
                        "Walk" -> Icon(
                            imageVector =
                            Icons.AutoMirrored.Filled.DirectionsWalk,
                            contentDescription = "Directions Walk"
                        )
                        "Ride" -> Icon(
                            imageVector =
                            Icons.Default.DirectionsBus,
                            contentDescription = "Directions Bus"
                        )
                        "Drive" -> Icon(
                            imageVector =
                            Icons.Default.DirectionsCar,
                            contentDescription = "Directions Car"
                        )
                    }
                }
            )
        }
    }
}
SegmentedButton.kt

代码要点

  • 该代码使用 remember 和 mutableStateListOf 初始化 selectedOptions 变量。这会跟踪每个按钮的选中状态。
  • 该代码使用 MultiChoiceSegmentedButtonRow 来包含按钮。
  • 在 forEachIndexed 循环内，代码会为每个选项创建一个 SegmentedButton：
    • shape 根据按钮的索引和选项的总数定义按钮的形状。
    • checked 根据 selectedOptions 中的相应值设置按钮的勾选状态。
    • 当用户点击该按钮时，onCheckedChange 会切换 selectedOptions 中对应项的选中状态。
    • icon 会根据 SegmentedButtonDefaults.Icon 和按钮的勾选状态显示图标。
    • label 使用带有适当图片矢量和内容说明的 Icon 可组合项，显示与标签对应的图标。

结果

显示一个包含“步行”“乘车”和“驾车”选项的分段按钮组件。目前选择的是“步行”和“骑行”选项。
图 2. 一个多选分段按钮，其中已选择两个选项。

其他资源