如何让Jetpack Compose的LazyVerticalGrid高度随内容适配（仿Google Keep）

问题描述 #

作为Jetpack Compose新手，尝试用LazyVerticalGrid实现类似Google Keep的笔记布局，但当前实现存在空白区域，希望优化达到Keep的紧凑布局效果。

现有代码 #

NoteListScreen.kt #

Column(modifier = Modifier.fillMaxWidth()) {
    LazyVerticalGrid(
        columns = GridCells.Fixed(2),
        content = {
            items(notes.value) {
                NoteItem(note = it)
            }
        }
    )
}

NoteItem.kt #

Card(
    modifier = Modifier.padding(
        top = 8.dp,
        start = 8.dp,
        end = 8.dp
    ),
    border = BorderStroke(
        color = Color.LightGray,
        width = 0.5.dp
    ),
    shape = RoundedCornerShape(corner = CornerSize(10.dp))
) {
    Column (modifier = Modifier.padding(16.dp)){
        Text(
            text = note.title,
            style = MaterialTheme.typography.body2,
            fontWeight = FontWeight.SemiBold
        )
        Spacer(modifier = Modifier.height(8.dp))
        Text(
            text = note.description!!,
            style = MaterialTheme.typography.body2,
            maxLines = 20,
            overflow = TextOverflow.Ellipsis
        )
    }
}

解决方案 #

可以通过调整LazyVerticalGrid的布局参数和NoteItem的配置来实现Google Keep风格的布局，无需更换其他方案。以下是修改后的代码：

修改后的NoteListScreen.kt #

LazyVerticalGrid(
    columns = GridCells.Fixed(2),
    // 控制网格与屏幕边缘的间距
    contentPadding = PaddingValues(8.dp),
    // 控制垂直方向的笔记间距
    verticalArrangement = Arrangement.spacedBy(8.dp),
    // 控制水平方向的笔记间距
    horizontalArrangement = Arrangement.spacedBy(8.dp),
    modifier = Modifier.fillMaxSize()
) {
    items(notes.value) { note ->
        NoteItem(note = note)
    }
}

修改后的NoteItem.kt #

Card(
    border = BorderStroke(
        color = Color.LightGray,
        width = 0.5.dp
    ),
    shape = RoundedCornerShape(10.dp),
    // 让卡片占满所在列的宽度
    modifier = Modifier.fillMaxWidth()
) {
    Column(modifier = Modifier.padding(16.dp)) {
        Text(
            text = note.title,
            style = MaterialTheme.typography.body2,
            fontWeight = FontWeight.SemiBold
        )
        Spacer(modifier = Modifier.height(8.dp))
        Text(
            text = note.description ?: "",
            style = MaterialTheme.typography.body2,
            maxLines = 20,
            overflow = TextOverflow.Ellipsis
        )
    }
}

关键修改说明 #

1. 移除冗余布局：去掉外层的Column，让LazyVerticalGrid直接填充整个屏幕，避免多余层级导致的空白。
2. 统一间距管理：通过LazyVerticalGrid的contentPadding、verticalArrangement和horizontalArrangement控制所有间距，替代NoteItem内的零散padding，确保布局规整无错位。
3. 卡片宽度适配：给NoteItem的Card添加fillMaxWidth()，让卡片占满列宽，避免宽度不一致产生的空白。
4. 空安全优化：将note.description!!替换为note.description ?: ""，避免空指针异常。

进阶优化（自适应列数） #

如果希望在平板等宽屏设备上自动显示更多列，可以将GridCells.Fixed(2)改为GridCells.Adaptive(minSize = 250.dp)，这样会根据屏幕宽度自动计算列数，保持每列最小宽度为250dp，更贴近Google Keep的多设备适配效果。

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