Andrei Kovalev

    Andrei Kovalev

    11 months ago
    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
    came up with custom lazy grid implementation and providing values to the parent Box via local composition
    p

    patrick

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

    Andrei Kovalev

    11 months ago
    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
        }
    }
    this is what I was trying to solve
    Andrey Kulikov

    Andrey Kulikov

    11 months ago
    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
    Andrei Kovalev

    Andrei Kovalev

    11 months ago
    thanks for the update, @Andrey Kulikov
    Alex

    Alex

    9 months ago
    Hey @Andrey Kulikov, is this already done? Or is there any update on this? 🙂
    Andrei Kovalev

    Andrei Kovalev

    9 months ago
    I’ve seen 1.1.0 beta LazyGrid is re-implemented, but I haven’t tried it yet
    Andrey Kulikov

    Andrey Kulikov

    9 months ago
    it is still in progress