How to make LazyVerticalGrid height follow the height of content item like on Google Keep Notes app?-CodePudding

I'm new to Jetpack Compose.

So I want to create a layout like in the Keep Notes app and I'm using LazyVerticalGrid

NoteListScreen.kt

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

And here is the code for 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
        )
    }
}`

But the result is like this and I don't know how to get rid of that empty space enter image description here

I want a result like that of the Google KeepNotes app enter image description here

How do I achieve this? is it possible for LazyVerticalGrid or should I find another solution?

Make Vertical grid like on Google Keep Notes app

CodePudding user response：

Try the LazyVerticalStaggeredGrid Composable:

LazyVerticalStaggeredGrid(columns = 2, content ={
        items(notes.value) {
            NoteItem(note = it)
        } )