Hello, I have a question about rows and columns. Y...

# compose-desktop

[David Dupraz]

Hello, I have a question about rows and columns.
You can see on the screenshot that I currently display a scrollable grid of cards and a fixed row of other cards. But that's really not nice. How can I make the row scrollable, following the grid ?
I join a thread with the screenshot and the components organisation.

[David Dupraz]

Column {
   Row { } //header row
   Row { 
        LazyVerticalGrid {} //card with inputs
       }
   Row {  } //the 3 last cards
}

[David Dupraz]

message has been deleted

[Timo Drick]

Maybe just use LazyColumn and than use the DSL of LazyColumn? Is this an option or do you really need grid?

[Timo Drick]

LazyColumn {
    stickyHeader { ... }
    items(FavoriteImages.values().toList().chunked(columns)) { columnList ->
        Row {
            for(item in columnList) {
                ...
            }
        }
    }
    item {
        ...
    }
}

[Timo Drick]

or here i do have a more elaborated version of using a grid in the scope of a LazyList:

inline fun <T> LazyListScope.gridItems(
    columns: Int,
    gridPadding: Dp = 0.dp,
    contentPadding: PaddingValues = PaddingValues(),
    items: List<T>,
    crossinline itemContent: @Composable LazyItemScope.(item: T) -> Unit
) {
    val chunkedItems = items.chunked(columns)
    itemsIndexed(chunkedItems) { index, rowList ->
        val layoutDirection = LocalLayoutDirection.current
        val topPadding = if (index > 0) gridPadding else contentPadding.calculateTopPadding()
        val startPadding = contentPadding.calculateLeftPadding(layoutDirection)
        val endPadding = contentPadding.calculateEndPadding(layoutDirection)
        val bottomPadding = contentPadding.calculateBottomPadding()
        Row(Modifier.padding(top = topPadding, start = startPadding, bottom = bottomPadding, end = endPadding)) {
            val rowModifier = Modifier.weight(1f)
            rowList.forEachIndexed { index, item ->
                if (index > 0) Spacer(Modifier.width(gridPadding))
                Box(rowModifier) {
                    itemContent(item)
                }
            }
            val emptyRows = (columns - rowList.size)
            repeat(emptyRows) { // fill empty cells
                Spacer(Modifier.width(gridPadding))
                Spacer(modifier = rowModifier)
            }
        }
    }
}