Jetpack Compose中对应Flutter Expanded的布局实现方法

在Jetpack Compose里，对应Flutter Expanded 的功能是通过给组件添加 Modifier.weight(1f) 实现的，它能让组件占据父布局的剩余可用空间。你只需要做两处核心修改：

1. 给父 Column 设置 Modifier.fillMaxSize()，确保它占满整个屏幕空间，这样权重计算才会生效
2. 给上部的 LogoNameTitle 组件添加 Modifier.weight(1f)，让它占据除底部联系方式外的所有剩余空间

修改后的代码 #

更新BusinessCard组件

@Composable
fun BusinessCard() {
    Surface(color = Color.DarkGray, modifier = Modifier.fillMaxSize()) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(16.dp)
        ) {
            LogoNameTitle(modifier = Modifier.weight(1f))
            ContactInformation()
        }
    }
}

更新LogoNameTitle组件（支持接收Modifier参数）

@Composable
fun LogoNameTitle(modifier: Modifier = Modifier) {
    Column(
        modifier = modifier,
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Image(
            painter = painterResource(id = R.drawable.android_logo),
            contentDescription = "Android logo",
        )
        Text("Jennifer Doe", color = Color.White)
        Text("Android Developer Extraordinaire", color = Color.Green)
    }
}

可选优化：给联系方式添加间距提升美观度

@Composable
fun ContactInformation() {
    Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
        Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
            Icon(imageVector = Icons.Rounded.Phone, contentDescription = "Phone number", tint = Color.Green)
            Text("+11 (123) 444 555 666", color = Color.White)
        }
        Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
            Icon(imageVector = Icons.Rounded.Share, contentDescription = "Social handle", tint = Color.Green)
            Text("@AndroidDev", color = Color.White)
        }
        Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
            Icon(imageVector = Icons.Rounded.Email, contentDescription = "Email address", tint = Color.Green)
            Text("jen.doe@android.com", color = Color.White)
        }
    }
}

修改完成后，上部的Logo、姓名和头衔会居中显示在屏幕的上半区域，联系方式则固定在屏幕底部，完全符合你的需求。

内容的提问来源于stack exchange，提问作者sm-sayedi