Material3分段按钮对齐且不截断文本的实现问题

问题分析 #

• 初始代码中，文本较长的按钮（如"Longer Words"）因内容换行，高度会自动适配文本，导致与其他按钮高度不一致。
• 参考方案使用Modifier.height(IntrinsicSize.Min)时，Row高度被限制为最短按钮的高度，强制所有按钮填充该高度后，长文本按钮的内容会被截断。

正确解决方案 #

通过以下布局调整，实现按钮高度统一且文本不截断：

1. 给SingleChoiceSegmentedButtonRow设置Modifier.height(IntrinsicSize.Max)，让Row高度适配最高按钮的高度。
2. 给每个SegmentedButton添加Modifier.fillMaxHeight()，使其填充Row的整体高度。
3. 利用SegmentedButton自带的contentPadding参数控制内部文本边距，避免硬编码尺寸。

修正后的代码 #

SingleChoiceSegmentedButtonRow(
    modifier = Modifier.height(IntrinsicSize.Max)
) {
    val options = listOf("Short", "Two Words", "Longer Words")
    options.forEachIndexed { index, option ->
        SegmentedButton(
            shape = SegmentedButtonDefaults.itemShape(index = index, count = options.size),
            selected = false,
            onClick = {},
            icon = {},
            modifier = Modifier.fillMaxHeight(),
            contentPadding = SegmentedButtonDefaults.ContentPadding
        ) {
            Text(
                text = option,
                fontSize = 14.sp
            )
        }
    }
}

额外说明 #

• 你之前添加水平padding能改善效果，本质是增加了按钮宽度，让长文本无需换行，间接统一了按钮高度，但这种方式依赖文本长度，不如通过IntrinsicSize.Max从布局层面解决更可靠。
• 避免硬编码height，利用Compose的固有尺寸特性（IntrinsicSize）可以自动适配不同设备、字体大小的布局需求，保证兼容性。

内容的提问来源于stack exchange，提问作者The Beruriah Incident