Android Compose名片布局问题：居中标题栏并底部对齐联系方式

需求说明 #

需要通过Row和Column组合实现名片布局，满足：

• ComposeNameTitle 垂直居中显示
• ComposeEmailSocialPhone 底部对齐显示

当前代码无法达到目标效果（当前效果：，目标效果：）。尝试过用两个重叠Row近似实现，但担心屏幕适配问题，且希望仅使用Row和Column完成布局，不使用ConstrainedLayout或Box。

当前代码 #

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            BusinessCardTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background,
                ) {
                    ComposeMainInfo()
                }
            }
        }
    }
}

@Composable
fun ComposeMainInfo() {
    Column(
        modifier = Modifier
            .fillMaxHeight()
            .fillMaxWidth()
            .background(Color(0xFFB69DF8)),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Column(
            modifier = Modifier
                .background(Color(0xFFEADDFF)),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center,
        ) {
            ComposeNameTitle()
        }
        Spacer(Modifier.height(20.dp))
        Column(
            modifier = Modifier
                .background(Color(0xFFD0BCFF)),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Bottom,
        ) {
            ComposeEmailSocialPhone()
        }
    }
}

@Composable
fun ComposeEmailSocialPhone() {
    ComposeMainInfoTexts(name = "+1 564565165474")
    ComposeMainInfoTexts(name = "@facebook")
    ComposeMainInfoTexts(name = "jrfdfdasdfsdfasfy@gmail.com")
}

@Composable
fun ComposeNameTitle() {
    val MyAppIcons = Icons.Rounded
    ComposeMainInfoLogo(icon = MyAppIcons.Menu)
    ComposeMainInfoTexts(name = "samel  \n davis")
    ComposeMainInfoTexts(name = "Software Engineer")
}

@Composable
fun ComposeMainInfoTexts(name: String) {
    Text(
        text = name,
        modifier = Modifier.padding(16.dp),
        fontSize = 24.sp,
    )
}

@Composable
fun ComposeMainInfoLogo(icon: ImageVector) {
    Icon(Icons.Rounded.Menu, contentDescription = "Localized description")
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    BusinessCardTheme {
        ComposeMainInfo()
    }
}

解决方案 #

核心是利用Column的weight属性分配垂直空间，让中间区域占满剩余高度，从而实现顶部内容居中、底部内容对齐底部的效果。修改后的ComposeMainInfo函数如下：

@Composable
fun ComposeMainInfo() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color(0xFFB69DF8)),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // 占满除底部区域外的所有垂直空间，内部内容居中
        Column(
            modifier = Modifier
                .weight(1f)
                .fillMaxHeight()
                .background(Color(0xFFEADDFF)),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            ComposeNameTitle()
        }

        // 底部区域，自动对齐到屏幕底部
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .background(Color(0xFFD0BCFF)),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Bottom
        ) {
            ComposeEmailSocialPhone()
        }
    }
}

关键修改点说明 #

1. 给包含ComposeNameTitle的子Column添加weight(1f)：让它占据父Column中除了底部区域之外的全部垂直空间，确保无论屏幕高度如何变化，这个区域都会自动填充剩余空间。
2. 给该子Column添加fillMaxHeight()：配合内部的verticalArrangement = Arrangement.Center，让其中的内容在整个可用高度内垂直居中。
3. 移除了原有的Spacer：因为weight已经自动分配了空间，不需要手动添加间距。
4. 给底部的子Column添加fillMaxWidth()：确保内容水平居中的范围覆盖整个屏幕宽度。

内容的提问来源于stack exchange，提问作者D.Zou