Jetpack Compose Grid without Lazy

#webdev #design #showdev #uiux

Introduction

For most grid situations we could use LazyVerticalGrid. But not if you want to add the grid to a scrollable column with multiple scrollable elements.

My custom grid-component fixes this exception:
Nesting scrollable in the same direction layouts like LazyColumn and Column(Modifier.verticalScroll()) is not allowed.

Example

Usage

=> The number of columns can be passed via columns-property.

Column(
    modifier = Modifier
        .fillMaxWidth()
) {
    Text(
        text = "Features",
        style = MaterialTheme.typography.h1,
        modifier = Modifier.padding(15.dp)
    )

    NonlazyGrid(
        columns = 3,
        itemCount = features.size,
        modifier = Modifier
            .padding(start = 7.5.dp, end = 7.5.dp)
    ) {
        FeatureItem(features[it])
    }
}

Implementation

@Composable
fun NonlazyGrid(
    columns: Int,
    itemCount: Int,
    modifier: Modifier = Modifier,
    content: @Composable() (Int) -> Unit
) {
    Column(modifier = modifier) {
        var rows = (itemCount / columns)
        if (itemCount.mod(columns) > 0) {
            rows += 1
        }

        for (rowId in 0 until rows) {
            val firstIndex = rowId * columns

            Row {
                for (columnId in 0 until columns) {
                    val index = firstIndex + columnId
                    Box(
                        modifier = Modifier
                            .fillMaxWidth()
                            .weight(1f)
                    ) {
                        if (index < itemCount) {
                            content(index)
                        }
                    }
                }
            }
        }
    }
}