A modern programming language that makes developers happier.

kotlinlang

EDrop_1720622556482.png

I wrote a composable function for full grids. But whenever the row count is an odd number and larger than 5, I get these 1 pixel spaces. Does anyone know how I can fix them. Code in :thread:

```// call site 
FullGrid(
    columns = 7,
    rows = 7,
) { _, size ->
    Box(
        modifier = Modifier
            .size(size)
            .background(Color.LightGray)
    ) { /*...*/ }
}

@Composable
fun FullGrid(
    columns: Int,
    rows: Int,
    modifier: Modifier = Modifier,
    content: @Composable RowScope.(index: Int, size: Dp) -> Unit,
) {
    var size by remember { mutableStateOf(0.dp) }
    val density = LocalDensity.current
    Column(modifier = modifier) {
        repeat(rows) { row ->
            Row(
                modifier = Modifier
                    .weight(1f)
                    .onSizeChanged {
                        with(density) {
                            size = it.height.toDp()
                        }
                    },
            ) {
                repeat(columns) { col ->
                    content(col + (row * columns), size)
                }
            }
        }
    }
}```

Maybe a rounding error somewhere converting from pixels to dps and back?

tmp_59922124-79c0-416f-b798-9ff566c14636.png

Why are you passing the size to the lambda as a param and using that to size your cell content via modifier? Even if you fix the gap, there will always be a frame lag between when your grid is measured and your cells catch up

I use them to calculate the size of smaller elements inside a cell as well as the cell's size

Using .fillMaxSize() on a cell makes the grid disproportionate as I want them to be square

You should pass layout constraints to your cells via the layout system, that’s why it exists

If you want the cells to be square, pass square constraints

I haven't used that before. How can I achieve that?

<https://developer.android.com/develop/ui/compose/layouts/custom>