1

I would like to make a static grid using Jetpack Compose. Currently I am working on Compose Multiplatform and I am having issues with resizing the window - I would like all of my elements in the grid to have a static (square) aspect ratio, like so -

wanted

however on resizing the window I get something like this -

unwanted

which is not the behavior I want. I would rather only see part of the grid and keep the aspect ratio the same.

I was thinking the best way to do this would be to make a grid unscrollable in Compose, but not sure how to do this. Here is a code sample:

     @Composable
//@Preview
fun GridDisplay(
    modifier: Modifier,
    gridSizeX: Int,
    gridSizeY: Int,
    zoom: Int
) {

    val gridBorderSize: Dp = 1.dp

    Box(modifier = Modifier
        .height((zoom * gridSizeY).dp)
        .width((zoom * gridSizeX).dp)
        .border(BorderStroke(gridBorderSize, Color.LightGray))

    ){
        LazyVerticalGrid(
            modifier = Modifier
                .wrapContentSize()
                .padding(gridBorderSize),
            columns = GridCells.Fixed(gridSizeX),
            content = {
                items((gridSizeX * gridSizeY)){ index ->

                    Box(modifier = Modifier
                        .height(zoom.dp)
//                        .width(zoom.dp) doesnt do anything - limited by lazygrid
                        .border(BorderStroke(gridBorderSize, Color.LightGray))
                        .align(Alignment.Center)
                    ){
                        Text(
                            text = "index : $index"
                        )
                    }
                }
            }
        )
    }

0 Answers0