Jetpack Compose：带分割线的两个文本按钮行内居中对齐问题求助

你的代码问题出在Row设置了fillMaxWidth()，导致Row占满整个屏幕宽度，虽然Arrangement.Center会让内部元素居中，但TextButton默认的水平内边距加上文本长度差异，会让视觉上看起来不对齐。另外，要让两个按钮宽度一致、分割线在中间，才能实现对称居中的期望效果。

修改后的代码 #

Box(
    modifier = Modifier.fillMaxWidth(),
    contentAlignment = Alignment.Center
) {
    Row(
        modifier = Modifier.height(IntrinsicSize.Min),
        horizontalArrangement = Arrangement.spacedBy(0.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        // 给两个按钮设置相同宽度，确保视觉对称
        TextButton(
            onClick = { /* 按钮1操作 */ },
            modifier = Modifier.width(100.dp) // 可根据需求调整宽度
        ) {
            Text(text = "Button 1")
        }

        Divider(
            color = Color.Gray,
            modifier = Modifier
                .fillMaxHeight()
                .width(1.dp)
        )

        TextButton(
            onClick = { /* 按钮2操作 */ },
            modifier = Modifier.width(100.dp)
        ) {
            Text(text = "Button 2")
        }
    }
}

关键调整点 #

• 移除Row的fillMaxWidth()，让Row仅包裹内容，借助Box的contentAlignment = Alignment.Center让整个按钮组居中在屏幕中间
• 给两个TextButton设置相同的固定宽度，保证视觉上的对称效果
• 设置Row的horizontalArrangement = Arrangement.spacedBy(0.dp)，避免按钮和分割线之间出现默认间距，让分割线紧贴按钮

适配动态文本的替代方案 #

如果不想固定宽度，可改用width(IntrinsicSize.Max)让两个按钮自动取最大的文本宽度，保持一致：

// 替换按钮的width参数
modifier = Modifier.width(IntrinsicSize.Max)

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