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 -
however on resizing the window I get something like this -
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"
)
}
}
}
)
}