Jetpack Compose：LazyVerticalGrid下方内容不显示问题求助

默认情况下，LazyVerticalGrid会尽可能占据父容器（此处为Column）的可用空间。当你增大Card的高度后，LazyVerticalGrid的总内容高度加上下方Button的高度超过了Column的fillMaxSize限制，而Column不会自动处理溢出，导致Button被挤出屏幕外无法显示。

给LazyVerticalGrid添加Modifier.weight(1f)，让它占据Column中除Button之外的所有可用空间，同时保留自身的滚动特性。修改后的代码如下：

val list = (1..10).map { it.toString() }

Column(modifier = Modifier
    .fillMaxSize()
) {
    LazyVerticalGrid(GridCells.Fixed(3),
        modifier = Modifier.weight(1f), // 添加此修饰符
        contentPadding = PaddingValues(
            start = 12.dp,
            top = 16.dp,
            end = 12.dp,
            bottom = 16.dp
        ),
        content = {
            items(list.size) { index ->
                Card(
                    backgroundColor = Color.Red,
                    modifier = Modifier
                        .padding(4.dp)
                        .height(200.dp) // 即使增大Card高度也能正常显示Button
                        .fillMaxWidth(),
                    elevation = 8.dp,
                ) {
                    Text(
                        text = list[index],
                        fontWeight = FontWeight.Bold,
                        fontSize = 30.sp,
                        color = Color(0xFFFFFFFF),
                        textAlign = TextAlign.Center,
                        modifier = Modifier.padding(16.dp)
                    )
                }
            }
        }
    )
    Button(onClick = { /*TODO*/ }) {
        Text("按钮") // 建议添加按钮文本，便于查看
    }
}

原理说明 #

• Modifier.weight(1f)会告知Column，让LazyVerticalGrid优先占据所有剩余空间，剩余空间分配给Button。
• 当LazyVerticalGrid的内容高度超过分配的空间时，它会自动启用滚动，确保Button始终固定在屏幕底部，不会被挤出。

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