Hi folks, I’m trying to resolve the issue when cards overlap in grid view with

zIndex

, but the problem is that in lazy LazyGrid Implementation

val rows = (scope.totalSize + nColumns - 1) / nColumns
    LazyColumn(
        modifier = modifier,
        state = state,
        contentPadding = contentPadding
    ) {
        items(rows) { rowIndex ->
            Row {
                for (columnIndex in 0 until nColumns) {
                    val itemIndex = rowIndex * nColumns + columnIndex
                    if (itemIndex < scope.totalSize) {
                        Box(
                            modifier = Modifier.weight(1f, fill = true),
                            propagateMinConstraints = true
                        ) {
                            scope.contentFor(itemIndex, this@items).invoke()
                        }
                    } else {
                        Spacer(Modifier.weight(1f, fill = true))
                    }
                }
            }
        }
    }

our composable items are wrapped in a Box, but

zIndex

only works for direct children of the composable node. How would you resolve this issue? Any suggestions are welcome

Sounds interesting! Do you mind sharing it here for other people to find should the question come up again?

yeah, sure

LazyColumn(
        modifier = modifier,
        state = state,
        contentPadding = contentPadding
    ) {
        items(rows) { rowIndex ->
            CompositionLocalProvider(
                LocalSwipableIndex provides mutableStateOf(-1),
            ) {
                Row {
                    for (columnIndex in 0 until nColumns) {
                        val itemIndex = rowIndex * nColumns + columnIndex
                        if (itemIndex < scope.totalSize) {
                            Box(
                                modifier = Modifier
                                    .weight(1f, fill = true)
                                    .zIndex(if (itemIndex == LocalSwipableIndex.current.value) 1f else 0f),
                                propagateMinConstraints = true
                            ) {
                                scope.contentFor(itemIndex, this@items).invoke()
                            }
                        } else {
                            Spacer(Modifier.weight(1f, fill = true))
                        }
                    }
                }
            }
        }
    }

So I provide state of the swipeable card for each row and in my SwipabeCard I set current index of the card which is being swiped:

@Composable
fun SwipableProfileCard(
    index: Int,
    model : ProfileCardModel
) {
    if (swipeState.swipeProgress.value.absoluteValue > 0) {
        LocalSwipableIndex.current.value = index
    }
}

It is not yet done, but the plan is to introduce a more low level api LazyLayout where you can provide different layout managers, similarly to how it works in RecyclerView, and after that LazyGrid will be reimplemented without adding extra Box for the item to support use cases like this

thanks for the update, @Andrey Kulikov

Hey @Andrey Kulikov, is this already done? Or is there any update on this? 🙂

I’ve seen 1.1.0 beta LazyGrid is re-implemented, but I haven’t tried it yet

it is still in progress