Jetpack Compose如何让Row内所有子项宽度等于最宽项宽度

问题场景 #

基于Jetpack Compose开发ToggleGroup组件时，核心实现为Row布局内嵌套Text选项：

• 手动指定固定宽度（如代码中.width(70.dp)）可实现等宽效果，但无法适配不同长度的选项文本，需要手动调参
• 需求为组件自动适配宽度，所有子项宽度自动统一为组内最宽子项的宽度，无需手动写死dp值

效果对比 #

• 预期等宽效果：
  
• 未指定固定宽度的实际不等宽效果：
  

原有固定宽度实现代码 #

Row(
    horizontalArrangement = Arrangement.End,
) {
    options.forEach { option ->
        val isSelected = option == selectedOption
        val textColor = if (isSelected) Color.White else MaterialTheme.colors.primary
        val backgroundColor = if (isSelected) Color.Gray else Color.White
        Row(
            horizontalArrangement = Arrangement.Center,
            modifier = Modifier
                .padding(
                    vertical = 6.dp, horizontal = 1.dp
                )
                .width(70.dp)
                .background(backgroundColor)
                .clickable { onSelectionChanged(option) }
        ) {
            Text(
                text = option,
                color = textColor,
                modifier = Modifier.padding(14.dp),
            )
        }
    }
}

解决方案 #

通过Compose固有特性测量（Intrinsics）即可实现，之前使用Intrinsics未生效是因为属性搭配错误，按以下两处修改即可：

1. 关键配置1：给外层Row添加Modifier.width(IntrinsicSize.Max)，让父容器宽度测量结果等于所有子项的最大固有宽度
2. 关键配置2：替换子项原有的固定宽度.width(70.dp)为.fillMaxWidth()，让每个子项撑满父容器的测量宽度（即最宽子项的宽度）

修改后的完整代码：

Row(
    horizontalArrangement = Arrangement.End,
    modifier = Modifier.width(IntrinsicSize.Max)
) {
    options.forEach { option ->
        val isSelected = option == selectedOption
        val textColor = if (isSelected) Color.White else MaterialTheme.colors.primary
        val backgroundColor = if (isSelected) Color.Gray else Color.White
        Row(
            horizontalArrangement = Arrangement.Center,
            modifier = Modifier
                .padding(
                    vertical = 6.dp, horizontal = 1.dp
                )
                .fillMaxWidth()
                .background(backgroundColor)
                .clickable { onSelectionChanged(option) }
        ) {
            Text(
                text = option,
                color = textColor,
                modifier = Modifier.padding(14.dp),
            )
        }
    }
}

补充说明 #

如果需要让ToggleGroup占满父容器全宽、所有选项平分宽度，只需要移除父Row的width(IntrinsicSize.Max)配置，给每个子项添加Modifier.weight(1f)即可，该场景和本次「适配最宽子项宽度、不额外拉伸」的需求有区别，按需选择即可。

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