Compose UI 之 Segmented buttons 分段按钮

Segmented buttons

SegmentedButton 是一种分段式按钮组件，它允许用户在一组相关的选项中选择一个或几个。

上图中：① 单选的分段式按钮。② 多选的分段式按钮。

分段式按钮的几个特点：

• 分段式按钮是带有状态的按钮，又有单选和多选之分。

• 从设计上将，不论是单选或是多选的分段式按钮，都是在一个水平方向上布局，因为 Compose UI 库中都是继承自 RowScope 的实现。

• 实现使用的数量是有限的，它实现了 2 ~ 5 个简单的选择按钮，要实现更多更复杂的选择，（官方）建议使用 chips 组件（后续文章会讨论）。

一个经典的 SegmentedButton 由 3 个部分组成，分别是：container 容器，icon 图标，text 文本。

单选 SegmentedButton

单选的分段式按钮允许在用户在多个互斥的选项中选择一个。它有助于在同一个页面中操作切换界面，选择 View等操作。

它的使用场景也比较多：

• 显示模式切换：类似购物 app 中 item 是网格显示方式还是列表方式显示。可以使用 单选 SegmentedButton。
• 排序方式选择：选择一个排序方式对众多的 item 进行排序。
• 筛选条件：作为单选，将单选 SegmentedButton 作为单个筛选条件也比较合适。

除上面的场景之外，只要是单个选择的场景中，均可以考虑使用单选分段式按钮。

下面是分段式按钮的声明：

@Composable
@ExperimentalMaterial3Api
fun SingleChoiceSegmentedButtonRowScope.SegmentedButton(
    selected: Boolean,
    onClick: () -> Unit,
    shape: Shape,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: SegmentedButtonColors = SegmentedButtonDefaults.colors(),
    border: BorderStroke = SegmentedButtonDefaults.borderStroke(
        colors.borderColor(enabled, selected)
    ),
    interactionSource: MutableInteractionSource? = null,
    icon: @Composable () -> Unit = {
   
    SegmentedButtonDefaults.Icon(selected) },
    label: @Composable () -> Unit
): Unit

参数	类型	描述
selected	Boolean	表示这个按钮是否被选中。如果为 true，则按钮会显示为选中状态；如果为 false，则按钮会显示为非选中状态。
onClick	() -> Unit	当按钮被点击时执行的回调函数。通常用于改变按钮的选中状态或触发其他相关的操作。
shape	Shape	定义按钮的形状。可以是任何实现了 Shape 接口的对象，如 RoundedCornerShape 或 CutCornerShape 等。
modifier	Modifier	用于修改按钮的布局和绘制的Modifier。例如，可以设置大小、边距、背景等。
enabled	Boolean	表示按钮是否可用。如果为false，则按钮将不会响应用户的输入，并可能显示为禁用状态。
colors	SegmentedButtonColors	定义按钮的颜色方案。可以是一个实现了 SegmentedButtonColors 接口的对象，该接口提供了用于不同状态和部分的颜色值。
border	BorderStroke	定义按钮的边框样式。可以是一个 BorderStroke 对象，它指定了边框的颜色、宽度和样式等。
interactionSource	MutableInteractionSource?	用于处理按钮的交互状态（如按下、聚焦等）的 MutableInteractionSource 对象。如果不提供，则按钮将不会有交互反馈。
icon	@Composable () -> Unit	一个用于显示按钮图标的 @Composable 函数。如果不提供自定义的图标，则会使用默认的图标实现。
label	@Composable () -> Unit	一个用于显示按钮标签的