Jetpack Compose：不使用padding实现行内元素垂直居中与多屏适配

AI 小北

2026-6-18

Compose名片应用联系项适配解决方案

1. 解决Row内元素垂直对齐问题

在ContactItem的Row中添加verticalAlignment = Alignment.CenterVertically属性，让图标与文本在Row内部自动垂直居中，替代手动调整的方式。

2. 用固定间距替代Weight避免过大空隙

不要使用weight属性分配空间，而是通过Spacer或给图标添加end padding的方式，设置图标与文本之间的固定间距，既保证布局紧凑，又避免不同屏幕下的间距异常。

3. 依赖父容器实现整体居中适配

让包含所有ContactItem的父Column设置fillMaxWidth()和horizontalAlignment = Alignment.CenterHorizontally，这样每个ContactItem会自动在屏幕水平方向居中，无需通过固定start padding偏移，完美适配不同屏幕尺寸。

完整示例代码

@Composable
private fun ContactItem(icon: ImageVector, info: String) {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier
            .wrapContentWidth()
            .padding(bottom = 16.dp)
    ) {
        Icon(
            imageVector = icon,
            contentDescription = null,
            tint = Color(0xFF187545),
            modifier = Modifier.size(24.dp) // 固定图标尺寸，确保所有行对齐一致
        )
        Spacer(modifier = Modifier.width(16.dp)) // 图标与文本的固定间距
        Text(
            text = info,
            fontSize = 20.sp,
            color = Color(0xFF154734)
        )
    }
}

// 父容器布局示例
@Composable
fun ContactSection() {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(vertical = 24.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        ContactItem(Icons.Default.Phone, "+1 123 456 7890")
        ContactItem(Icons.Default.Email, "example@mail.com")
        ContactItem(Icons.Default.LocationOn, "New York, USA")
    }
}