android - How to create a LazyVerticalStaggeredGrid that items aligned to start for every even index? - Stack Overflow

admin管理员组

文章数量:1336613

I need to have a LazyVerticalStaggeredGrid that aligns every even item to the left no matter of other which height other items have but while aligning depends height of last 2 items it aligns item to the right as

with

LazyVerticalStaggeredGrid(
    contentPadding = PaddingValues(16.dp),
    columns = StaggeredGridCells.Fixed(2),
    verticalItemSpacing = 8.dp,
//            horizontalArrangement = arrangement
) {
    items(3) {
        val height = if (it == 0) {
            240.dp
        } else 150.dp

        Box(
            modifier = Modifier
                .size(itemWidth, height)
                .background(Color.Red, RoundedCornerShape(16.dp)),
            contentAlignment = Alignment.Center
        ) {
            Text("Item: $it", fontSize = 30.sp, color = Color.White)
        }
    }
}

I also tried using a custom arrangement with

val arrangement = remember {
    object : Arrangement.Horizontal {

        var size = 0
        override fun Density.arrange(
            totalSize: Int,
            sizes: IntArray,
            layoutDirection: LayoutDirection,
            outPositions: IntArray,
        ) {

            println(
                "total size: $totalSize," +
                        " sizes: ${sizes.size}, " +
                        "outPositions: ${outPositions.size}"
            )
//                        sizes.forEachIndexed { index, i ->
//                            size = if (index % 2 == 0) 0 else i
//                            try {
//                                outPositions[i] = size
//                            } catch (e: Exception) {
//                                e.printStackTrace()
//                            }
//                        }

        }

    }
}

But it returns 2 items while there are 3 items.

Tried same thing with FlowRow which works as i needed when only there are 3 items

FlowRow(
    maxItemsInEachRow = 2,
    horizontalArrangement = Arrangement.spacedBy(8.dp),
    verticalArrangement = Arrangement.spacedBy(8.dp)
) {

    repeat(3){
        val height = if (it == 0) {
            240.dp
        } else 150.dp

        Box(
            modifier = Modifier
                .size(itemWidth, height)
                .background(Color.Red, RoundedCornerShape(16.dp)),
            contentAlignment = Alignment.Center
        ) {
            Text("Item: $it", fontSize = 30.sp, color = Color.White)
        }
    }
}

but when item count is bigger it doesn't work as staggered grid should work obviously being a Row with 2 items and not aligning in staggered grid manner.

How to make custom arrangement or something else with LazyVerticalStaggeredGrid so it aligns items starting from left no matter what height other items have?

Full code to play around or reproduce the issue

@Preview
@Composable
fun StaggeredGridAlignTest() {

    BoxWithConstraints(
        modifier = Modifier.padding(16.dp)
    ) {

        val itemWidth = maxWidth / 2 - 8.dp

        val arrangement = remember {
            object : Arrangement.Horizontal {

                var size = 0
                override fun Density.arrange(
                    totalSize: Int,
                    sizes: IntArray,
                    layoutDirection: LayoutDirection,
                    outPositions: IntArray,
                ) {

                    println(
                        "total size: $totalSize," +
                                " sizes: ${sizes.size}, " +
                                "outPositions: ${outPositions.size}"
                    )
//                        sizes.forEachIndexed { index, i ->
//                            size = if (index % 2 == 0) 0 else i
//                            try {
//                                outPositions[i] = size
//                            } catch (e: Exception) {
//                                e.printStackTrace()
//                            }
//                        }

                }

            }
        }

        Column(
            modifier = Modifier.fillMaxSize()
        ) {

            LazyVerticalStaggeredGrid(
                columns = StaggeredGridCells.Fixed(2),
                verticalItemSpacing = 8.dp,
                horizontalArrangement = arrangement
            ) {
                items(3) {
                    val height = if (it == 0) {
                        240.dp
                    } else 150.dp

                    Box(
                        modifier = Modifier
                            .size(itemWidth, height)
                            .background(Color.Red, RoundedCornerShape(16.dp)),
                        contentAlignment = Alignment.Center
                    ) {
                        Text("Item: $it", fontSize = 30.sp, color = Color.White)
                    }
                }
            }

            FlowRow(
                maxItemsInEachRow = 2,
                horizontalArrangement = Arrangement.spacedBy(8.dp),
                verticalArrangement = Arrangement.spacedBy(8.dp)
            ) {

                repeat(3) {
                    val height = if (it == 0) {
                        240.dp
                    } else 150.dp

                    Box(
                        modifier = Modifier
                            .size(itemWidth, height)
                            .background(Color.Red, RoundedCornerShape(16.dp)),
                        contentAlignment = Alignment.Center
                    ) {
                        Text("Item: $it", fontSize = 30.sp, color = Color.White)
                    }
                }
            }
        }
    }
}

本文标签：