Jetpack Compose实现分段按钮：自定义单选按钮组方案咨询

一、自定义实现（完全可控） #

不需要依赖第三方，直接基于Compose基础组件封装，核心思路是用单选逻辑+自定义按钮样式模拟分段控件：

• 用mutableStateOf维护当前选中的索引，控制每个分段的状态切换
• 用Row作为外层容器，内部放置多个自定义按钮组件，摒弃原生单选按钮的勾选标记
• 通过背景色、文字颜色、边框样式区分选中/未选中状态，精准匹配iOS的视觉效果
• 给每个按钮绑定点击事件，点击时更新选中状态并触发回调

示例代码片段：

@Composable
fun SegmentedControl(
    options: List<String>,
    selectedIndex: Int,
    onSelectedIndexChange: (Int) -> Unit
) {
    Row(
        modifier = Modifier
            .clip(RoundedCornerShape(8.dp))
            .border(1.dp, Color.Gray, RoundedCornerShape(8.dp))
    ) {
        options.forEachIndexed { index, label ->
            val isSelected = index == selectedIndex
            Box(
                modifier = Modifier
                    .weight(1f)
                    .background(if (isSelected) Color.Blue else Color.Transparent)
                    .clickable { onSelectedIndexChange(index) }
                    .padding(vertical = 8.dp),
                contentAlignment = Alignment.Center
            ) {
                Text(
                    text = label,
                    color = if (isSelected) Color.White else Color.Gray
                )
            }
        }
    }
}

// 使用方式
val options = listOf("选项1", "选项2", "选项3")
var selectedIndex by remember { mutableStateOf(0) }
SegmentedControl(options, selectedIndex) { selectedIndex = it }

二、第三方库（快速开发） #

如果不想自己封装，有不少成熟的Compose第三方库支持分段控件：

• Compose Segmented Control：轻量级组件，支持自定义圆角、颜色、文字样式，兼容Material 2和3，直接引入就能用
• 部分Material 3补全库：有些社区库已经实现了Material 3规范下的分段控件，功能更全面，支持图标、自定义动画等

选择建议 #

• 如果需要完全匹配iOS的视觉细节，或者有特殊交互需求，优先自定义实现，灵活性更高
• 如果追求开发效率，且对样式要求不极端，第三方库是更省心的选择

内容的提问来源于stack exchange，提问作者Harvey Xie