Jetpack Compose：无需Padding/Spacer实现联系人元素对齐

核心思路 #

• 用Arrangement.spacedBy替代Spacer，统一处理垂直间距，避免手动添加多个Spacer，适配性更好
• 给每个联系人行设置图标与文字的固定间距，同时让图标保持统一尺寸，确保垂直对齐
• 调整Column的对齐方式，让所有联系人行整体左对齐（或按需调整），替代原有的居中对齐

修改后的完整代码 #

@Composable
fun Greeting() {
    Column(modifier = Modifier.fillMaxSize()) {
        loadLogo()
        loadContactInfo()
    }
}

@Composable
fun loadLogo(
    fio: String = stringResource(R.string.FIO),
    logo: Int = R.drawable.android_logo,
    title: String = stringResource(R.string.title)
) {
    Column(
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier
            .fillMaxWidth()
            .weight(1f) // 让Logo区域自动填充剩余空间，把联系人信息推至底部
    ) {
        Image(
            painter = painterResource(id = logo),
            contentDescription = stringResource(R.string.logo_desc),
            modifier = Modifier
                .size(150.dp)
                .padding(bottom = 8.dp)
        )
        Text(text = fio, fontSize = 32.sp, modifier = Modifier.padding(bottom = 4.dp))
        Text(text = title, fontSize = 16.sp, color = Color.Green)
    }
}

@Composable
fun loadContactInfo(
    phoneNum: String = stringResource(R.string.my_phone_num),
    TGLink: String = stringResource(R.string.telegram_link),
    emailAddress: String = stringResource(R.string.email_adress)
) {
    Column(
        verticalArrangement = Arrangement.spacedBy(35.dp), // 替代Spacer，统一垂直间距
        horizontalAlignment = Alignment.Start, // 整体左对齐，让图标自动排成一列
        modifier = Modifier
            .fillMaxWidth()
            .padding(start = 16.dp, bottom = 45.dp)
    ) {
        // 提取通用联系人行组件，避免重复代码
        @Composable
        fun ContactRow(icon: ImageVector, text: String) {
            Row(
                verticalAlignment = Alignment.CenterVertically, // 图标与文字垂直居中对齐
                horizontalArrangement = Arrangement.spacedBy(16.dp) // 图标与文字的固定间距
            ) {
                Icon(
                    imageVector = icon,
                    contentDescription = text,
                    modifier = Modifier.size(24.dp) // 固定图标尺寸，确保垂直对齐
                )
                Text(text = text)
            }
        }

        ContactRow(Icons.Default.Phone, phoneNum)
        ContactRow(Icons.Default.Share, TGLink)
        ContactRow(Icons.Default.Email, emailAddress)
    }
}

关键调整说明 #

1. Logo区域适配：给loadLogo的Column添加weight(1f)，让Logo区域自动填充屏幕剩余空间，无需手动设置固定底部padding，适配不同屏幕高度
2. 间距统一管理：用Column的Arrangement.spacedBy(35.dp)替代所有Spacer，统一控制行与行的垂直间距，适配性更强
3. 行内对齐优化：每个Row设置verticalAlignment = Alignment.CenterVertically让图标和文字垂直居中，horizontalArrangement = Arrangement.spacedBy(16.dp)设置图标与文字的固定间距，替代手动Padding
4. 图标尺寸统一：给所有图标设置固定尺寸size(24.dp)，确保垂直方向上完全对齐
5. 整体布局修正：原Greeting函数添加外层Column包裹两个组件，避免布局重叠；将联系人列表的Column对齐方式改为Alignment.Start，让图标自然形成整齐的列

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