Jetpack Compose中如何实现两个按钮等宽且不硬编码宽度

核心思路 #

不硬编码dp值的前提下，有两种常用实现方式，核心都是让两个按钮的宽度统一对齐到最长文本对应的宽度：

• 权重方案：用Modifier.weight()给两个按钮设相同权重，搭配fill = false参数，让同权重组件自动取组内最大内容宽度
• 固有测量方案：用Compose的固有尺寸特性，让容器包裹最长内容，内部按钮撑满容器宽度

如果需要让两个按钮直接平分整行宽度，只要给两个按钮加Modifier.weight(1f)即可，不需要额外参数。

方案1：权重实现（代码改动最小） #

直接在原代码基础上给两个按钮加权重修饰符即可：

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.Center
) {
    Button(
        modifier = Modifier
            .weight(1f, fill = false)
            .padding(end = 5.dp),
        onClick = { }
    ) {
        Text("Short")
    }

    Button(
        modifier = Modifier
            .weight(1f, fill = false)
            .padding(start = 5.dp),
        onClick = { }
    ) {
        Text("This is a Long")
    }
}

参数说明：

• weight(1f, fill = false)：两个按钮权重相等，宽度自动统一为最长文本的按钮宽度，不会被拉伸占满整行，整体保持居中
• 把原代码中第二个按钮单独的10dp左间距拆成两个按钮各5dp的边距，避免单侧padding导致视觉不对称

方案2：固有特性测量实现 #

嵌套一层Row用固有尺寸实现，逻辑更直观，还可以直接用spacedBy统一设置间距：

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.Center
) {
    Row(
        modifier = Modifier.width(IntrinsicSize.Max),
        horizontalArrangement = Arrangement.spacedBy(10.dp)
    ) {
        Button(
            modifier = Modifier.fillMaxWidth(),
            onClick = { }
        ) {
            Text("Short")
        }
        Button(
            modifier = Modifier.fillMaxWidth(),
            onClick = { }
        ) {
            Text("This is a Long")
        }
    }
}

逻辑说明：

• 内层Row设置width(IntrinsicSize.Max)，意思是内层Row的宽度等于内部子项的最大宽度，也就是长文本按钮的宽度
• 两个按钮都设置fillMaxWidth()，会自动撑满内层Row的宽度，自然就等宽了
• Arrangement.spacedBy(10.dp)直接给两个按钮之间加10dp间距，不需要手动给单个按钮加padding

原问题效果参考 #

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