如何让两个Composable函数对齐为参考图样式，避免Info组件消失？

我尝试用以下代码实现类似参考图的名片布局，但给MainBox的Column添加modifier = Modifier.fillMaxSize()让内容居中后，Info组件直接消失了。请问怎么让MainBox内容居中的同时，保留底部的Info组件？

原始代码：

fun MainBox(name: String, title: String){
    val image = painterResource(R.drawable.android_logo)
    Column(
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Image(painter = image, contentDescription = null, modifier = Modifier.size(100.dp)  )
        Text(text = name, fontSize = 26.sp ,modifier = Modifier
            .fillMaxWidth()
            .wrapContentWidth(Alignment.CenterHorizontally))
        Text(text = title, color = Color(0xFF3ddc84), modifier = Modifier
            .fillMaxWidth()
            .wrapContentWidth(Alignment.CenterHorizontally))
    }
}
@Composable
fun Info(phone: String, at: String, email: String){
    Column(modifier = Modifier.fillMaxHeight().wrapContentHeight(Alignment.Bottom).padding(bottom = 20.dp)) {
        Row(modifier = Modifier.padding(10.dp)){
            Icon(Icons.Rounded.Phone, contentDescription = phone, modifier = Modifier.padding(start = 20.dp, end = 20.dp))
            Text(text = phone)
        }
        Row(modifier = Modifier.padding(10.dp)){Icon(Icons.Rounded.Share, contentDescription = at,  modifier = Modifier.padding(start = 20.dp, end = 20.dp))
            Text(text = at)}
        Row(modifier = Modifier.padding(10.dp)){ Icon(Icons.Rounded.Email, contentDescription = email,  modifier = Modifier.padding(start = 20.dp, end = 20.dp))
            Text(text = email)}
    }
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    BusinessCardTheme {
        Column() {
            MainBox(name = "And Roid", title = "Developer man")
            Info(phone = "+1 234-567-8910", at = "@handle", email = "email@dev.com" )
        }
            }
}

解决方案 #

问题核心是fillMaxSize()会让MainBox的Column占据整个屏幕，把Info组件挤出可视区域。只需调整根布局的结构，用weight分配空间即可实现需求：

修改后的完整代码：

@Composable
fun MainBox(name: String, title: String, modifier: Modifier = Modifier){
    val image = painterResource(R.drawable.android_logo)
    Column(
        modifier = modifier,
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Image(painter = image, contentDescription = null, modifier = Modifier.size(100.dp))
        Text(
            text = name, 
            fontSize = 26.sp,
            modifier = Modifier.fillMaxWidth().wrapContentWidth(Alignment.CenterHorizontally)
        )
        Text(
            text = title, 
            color = Color(0xFF3ddc84),
            modifier = Modifier.fillMaxWidth().wrapContentWidth(Alignment.CenterHorizontally)
        )
    }
}

@Composable
fun Info(phone: String, at: String, email: String){
    Column(
        modifier = Modifier.padding(bottom = 20.dp)
    ) {
        Row(modifier = Modifier.padding(10.dp)){
            Icon(Icons.Rounded.Phone, contentDescription = phone, modifier = Modifier.padding(start = 20.dp, end = 20.dp))
            Text(text = phone)
        }
        Row(modifier = Modifier.padding(10.dp)){
            Icon(Icons.Rounded.Share, contentDescription = at,  modifier = Modifier.padding(start = 20.dp, end = 20.dp))
            Text(text = at)
        }
        Row(modifier = Modifier.padding(10.dp)){ 
            Icon(Icons.Rounded.Email, contentDescription = email,  modifier = Modifier.padding(start = 20.dp, end = 20.dp))
            Text(text = email)
        }
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    BusinessCardTheme {
        Column(modifier = Modifier.fillMaxSize()) {
            MainBox(
                name = "And Roid", 
                title = "Developer man",
                modifier = Modifier.weight(1f)
            )
            Info(
                phone = "+1 234-567-8910", 
                at = "@handle", 
                email = "email@dev.com"
            )
        }
    }
}

关键修改点：

1. 给MainBox添加默认modifier参数，方便外部传递布局属性
2. 根Column设置fillMaxSize()，让整个布局占满屏幕
3. 给MainBox传递Modifier.weight(1f)，使其占据除Info外的所有垂直空间，内部的居中设置就能正常生效
4. 移除Info组件里的fillMaxHeight().wrapContentHeight(Alignment.Bottom)，因为根Column的布局逻辑会自动把Info推到屏幕底部

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