Jetpack Compose实现Row内排布双按钮，解决固定间距多设备适配问题

问题核心 #

硬编码170dp的固定间距是适配失效的核心原因：

• 小屏设备上，两个按钮自身宽度叠加170dp间距会超出Row的可用宽度，造成按钮挤压、文字截断
• 大屏设备上，170dp的固定间距过窄，两个按钮视觉上间距不足，达不到参考图中两端分置的视觉效果
  参考图的实际排布逻辑是两个按钮分别对齐Row内容区的左右边缘，中间的空隙由剩余屏幕空间自动撑开，本身不存在固定数值的间距。

具体调整方法 #

直接替换Row的水平排布规则，不需要硬编码间距：

• 删除原有固定间距的配置，将horizontalArrangement参数改为Arrangement.SpaceBetween
• 该排布规则会自动把第一个子组件放在排布区域最左侧，最后一个子组件放在排布区域最右侧，所有剩余空间均匀分配在两个组件之间，完全适配不同屏幕宽度
• 可选补充：在Row的Modifier上添加统一的水平内边距，避免按钮直接贴靠屏幕边缘，符合Material Design的通用边距规范

调整后的可直接运行的代码：

Row(
    horizontalArrangement = Arrangement.SpaceBetween,
    modifier = Modifier
        .fillMaxWidth()
        // 可按需调整水平内边距，避免按钮贴屏幕边缘
        .padding(horizontal = 16.dp)
) {
    Button(
        onClick = { /*TODO*/ },
    ) {
        Text(
            modifier = Modifier.padding(8.dp),
            text = "Send Email",
            style = TextStyle(fontSize = 15.sp)
        )
    }
    Button(
        onClick = { /*TODO*/ },
    ) {
        Text(
            modifier = Modifier.padding(8.dp),
            text = "Call",
            style = TextStyle(fontSize = 15.sp)
        )
    }
}

补充提示 #

如果后续需要在这个Row中增加更多按钮，Arrangement.SpaceBetween会自动把剩余空间均匀分配在所有相邻按钮之间，不需要手动调整间距数值；如果需要保持按钮间固定间距、同时让按钮组分别贴靠左右两端，也可以通过给单侧容器加weight(1f)配合对齐参数实现，但当前参考图的场景下，用SpaceBetween是最简洁、适配性最好的实现方案。

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