Android Jetpack Compose：Row左对齐与底部布局优化方案问询

核心实现思路 #

抛弃固定宽度Spacer的生硬居中方案，通过两层容器嵌套实现需求：

1. 外层用Box并设置contentAlignment = Alignment.BottomCenter，直接让内部内容垂直居底、水平居中
2. 内层用Column并设置horizontalAlignment = Alignment.Start，让所有PresentationTextWithIcon组件左对齐排列

修改后的完整代码示例 #

// 外层容器：实现整体居底+水平居中
Box(
    modifier = Modifier.fillMaxSize(),
    contentAlignment = Alignment.BottomCenter
) {
    // 内层列容器：让所有子组件左对齐
    Column(
        horizontalAlignment = Alignment.Start,
        verticalArrangement = Arrangement.spacedBy(12.dp), // 可自定义组件间垂直间距
        modifier = Modifier.padding(bottom = 24.dp) // 可自定义底部边距
    ) {
        PresentationTextWithIcon(
            icon = Icons.Default.Email,
            text = "alex@example.com"
        )
        PresentationTextWithIcon(
            icon = Icons.Default.Phone,
            text = "+1 555 123 4567"
        )
        PresentationTextWithIcon(
            icon = Icons.Default.Share,
            text = "@AlexGheorghe"
        )
    }
}

// 单个带图标的文本组件
@Composable
fun PresentationTextWithIcon(icon: ImageVector, text: String) {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.fillMaxWidth() // 让Row占满Column宽度，确保左对齐统一
    ) {
        Icon(
            imageVector = icon,
            contentDescription = null,
            modifier = Modifier.size(24.dp),
            tint = MaterialTheme.colorScheme.onSurface
        )
        Spacer(modifier = Modifier.width(16.dp)) // 仅用于图标和文本的固定间距，非居中用途
        Text(
            text = text,
            style = MaterialTheme.typography.bodyLarge
        )
    }
}

方案优势 #

• 完全自适应屏幕尺寸，不会因屏幕宽度变化导致布局错位
• 无需手动计算或设置固定宽度的Spacer，符合Compose声明式布局的设计理念
• 视觉上保持所有PresentationTextWithIcon组件左对齐，同时整体在屏幕底部水平居中，还原课程设计的视觉效果

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