如何在Jetpack Compose的LazyColumn中用weight修饰符按比例分配子项高度

问题原因 #

LazyColumn属于竖直滚动容器，在主轴（竖直方向）上的可用高度为无限大。而Modifier.weight的作用是基于父容器的剩余可用高度按比例分配空间，当父容器高度无上限时，没有可分配的固定高度基础，因此两个Surface的高度会被计算为0，导致内容无法显示。

解决方案 #

你可以使用LazyColumn item作用域下提供的fillParentMaxHeight()修饰符，让内部Column先占满LazyColumn父布局的可视高度，这样weight就有了高度分配的基准。同时如果内部内容实际高度超过可视高度，Column会自动撑开，配合LazyColumn的滚动能力避免内容被遮挡。

修改后可正常运行的代码如下：

@Preview(showBackground = true)
@Composable
fun LayoutCheck() {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        LazyColumn(
            modifier = Modifier.fillMaxSize(),
            contentPadding = PaddingValues(20.dp)
        ) {
            item {
                Column(
                    // 关键修改：使用fillParentMaxHeight让item占满LazyColumn的父布局可视高度
                    modifier = Modifier.fillParentMaxHeight(),
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    Surface(
                        modifier = Modifier
                            .width(200.dp)
                            .weight(3f),
                        color = MaterialTheme.colors.primary
                    ) {}
                    Surface(
                        modifier = Modifier
                            .width(200.dp)
                            .weight(1f),
                        color = MaterialTheme.colors.secondary
                    ) {}
                }
            }
        }
    }
}

补充说明 #

fillParentMaxHeight是Lazy列表专属的修饰符，只能在LazyColumn/LazyRow的item作用域内使用，它会自动匹配Lazy列表父容器的高度，不需要手动计算屏幕尺寸，适配性更好。该实现完全匹配你的登录页需求：屏幕空间充足时Logo区域占2/3、操作区域占1/3，当字体放大、屏幕旋转导致内容超出屏幕时，整个页面可以滚动，不会出现按钮被遮挡的问题。

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