Jetpack Compose 主导航中的全屏 IconList

您可以使用“布局检查器”来了解布局的外观。

Android 开发人员的本指南会有所帮助。

但是，您可能会发现应该设置网格中每行的高度以达到您想要执行的操作。

为此，您可以尝试获取当前布局高度并将其除以列数，然后将每个项目的高度设置为该值。

val density = LocalDensity.current
with(density){
    val h = LocalConfiguration.current.screenHeightDp*density.density/(listItem.size/numberOfColumns)
    LazyVerticalGrid(
    ...
    ){
        items(...){
            Box(
                modifier = Modifier
                          .fillMaxWidth()
                          .height(h.toDp())
            ){
                ...
             }
        }
    }
}

结果是这样的：

编辑：

下面是一个示例：

val density = LocalDensity.current
Test2Theme {
    // A surface container using the 'background' color from the theme
    Scaffold(modifier = Modifier.fillMaxSize()) {
        val listItem = listOf("1", "2", "3", "4", "5", "6")
        val numberOfColumns = 2
        with(density) {
            val eachHeight =
                LocalConfiguration.current.screenHeightDp*density.density/(listItem.size/numberOfColumns)
            LazyVerticalGrid(
                columns = GridCells.Fixed(numberOfColumns),
                modifier = Modifier
                    .padding(it)
                    .fillMaxSize()
            ) {
                items(listItem) {
                    Box(
                        modifier = Modifier
                            .fillMaxWidth()
                            .height(eachHeight.toDp())
                            .border(
                                BorderStroke(1.dp, Color.Black)
                            )
                    ) {
                        Text(
                            text = it,
                            textAlign = TextAlign.Center,
                            modifier = Modifier.fillMaxSize()
                        )
                    }
                }
            }
        }
    }
}

不同分辨率的结果

编辑：

以上方式仅适用于全屏。 如果要获取组件大小，Modifier.onGloballyPosition 会在合成后传递大小。

因此，要实现您的目标，就像：

val listItem = listOf("1", "2", "3", "4", "5", "6")
val numberOfColumns = 2
var eachHeight by remember {
    mutableStateOf(0.dp)
}
LazyVerticalGrid(
    columns = GridCells.Fixed(numberOfColumns),
    modifier = Modifier
        .padding(it)
        .fillMaxSize()
        .onGloballyPositioned {
            eachHeight =
                with(density) { (it.size.height / (listItem.size / numberOfColumns)).toDp() }
        }
) {
    items(listItem) {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(eachHeight)
                .border(
                    BorderStroke(1.dp, Color.Black)
                )
        ) {
            ...
        }
    }
}

结果是这样的：

或者您可以创建自定义布局，例如

@Composable
fun MyGridLayout(
modifier: Modifier = Modifier,
row: Int,
col: Int,
content: @Composable ()-> Unit,
){
Layout(
    content = content,
    modifier = modifier
) { measurables, constraints ->
    //calculate each children's width & height
    var placeable = measurables.map {
        val width = constraints.maxWidth/col
        val height = constraints.maxHeight/row
        var c = Constraints(minWidth = width, maxWidth = width, maxHeight = height, minHeight = height)
        it.measure(c)
    }
    //then place them
    layout(constraints.maxWidth, constraints.maxHeight) {
        var yPosition = 0
        var xPosition = 0
        var mCol = 1
        placeable.forEach {
            it.placeRelative(xPosition, yPosition)
            if (mCol % col != 0) {
                xPosition += it.width
            }
            else {
                xPosition = 0
                yPosition += it.height
            }
            mCol+=1
        }
    }
}

并像这样使用它

Scaffold(
    modifier = Modifier.fillMaxSize(),
    topBar = {
        TopAppBar(
            ...
        )
    }
) {
    val listItem = listOf("1", "2", "3", "4", "5", "6")
    val numberOfColumns = 2
    MyGridLayout(
        modifier = Modifier.padding(it).fillMaxSize(),
        row = listItem.size/numberOfColumns,
        col = numberOfColumns
    ){
        listItem.forEach { str->
            Box(
                modifier = Modifier
                    .border(
                        BorderStroke(1.dp, Color.Black)
                    )
            ) {
              ...
            }
        }
    }
}

两个结果是一样的。