Jetpack Compose Column垂直Arrangement.SpaceBetween不生效如何解决

修复思路 #

问题核心是Arrangement.SpaceBetween需要作用在有确定高度的Column上，同时不能让外层Row撑满全屏，仅需两步修改即可：

• 给外层的Row添加height(IntrinsicSize.Max)修饰符，该属性会让Row的高度自动适配内部最高的子元素高度，不会无限制拉伸占满屏幕
• 给右侧承载「人数/状态」的Column添加fillMaxHeight()修饰符，此时Column高度会和Row高度保持一致，verticalArrangement = Arrangement.SpaceBetween配置就会正常生效

修改后的关键代码 #

@Composable
fun SoFixClientTourCard() {
    Column {
        Row(
            verticalAlignment = Alignment.Top,
            modifier = Modifier
                .background(Color.White)
                .fillMaxWidth()
                .height(IntrinsicSize.Max) // 新增：Row高度匹配内部最高子元素
                .padding(16.dp)
        ) {

            // 日历模块代码保持不变
            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
                modifier = Modifier
                    .padding(top = 4.dp)
                    .background(MaterialTheme.colors.error)
                    .shadow(1.dp)
                    .padding(horizontal = 8.dp, vertical = 4.dp)
            ) {
                Text("02", fontSize = 14.sp, fontWeight = FontWeight.Bold, color = Color.White)
                Text("OCT", fontSize = 12.sp, fontWeight = FontWeight.Bold, color = Color.White)
            }

            // 行程与套餐名称代码保持不变
            Column(
                modifier = Modifier
                    .padding(horizontal = 16.dp)
                    .weight(1f)
            ) {
                Text("Tanguar Haor Tour", style = MaterialTheme.typography.subtitle1, fontWeight = FontWeight.Bold)
                Text(
                    "Couple Non-AC + Single Non-AC + Family Non-AC + Couple AC",
                    style = MaterialTheme.typography.body2,
                    lineHeight = 20.sp,
                    modifier = Modifier.padding(top = 4.dp)
                )
            }

            // 人数与状态模块
            Column(
                horizontalAlignment = Alignment.End,
                verticalArrangement = Arrangement.SpaceBetween,
                modifier = Modifier.fillMaxHeight() // 新增：占满Row高度，不会超出适配后的高度
            ) {
                Text("7 pax", fontSize = XS)
                val status = "Upcoming"
                Text(
                    status,
                    fontSize = XXXS,
                    color = Color.White,
                    modifier = Modifier
                        .padding(top = 4.dp)
                        .background(
                            when (status.lowercase()) {
                                "upcoming" -> MaterialTheme.colors.primary
                                "cancelled" -> MaterialTheme.colors.error
                                else -> Color.DarkGray
                            }
                        )
                        .padding(horizontal = 8.dp, vertical = 4.dp)
                )
            }
        }
    }
}

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