Android Jetpack Compose主导航中的全屏图标列表

您可以使用"布局判断器"来了解布局是什么样子的.

安卓开发者提供的这guide美元将是有帮助的.

但是，您可能会发现，您应该设置网格的每一行的高度才能达到您想要的效果.

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

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.onGloballyPosited会在合成后传递该大小.

因此，要实现您的目标，应该是:

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)
                    )
            ) {
              ...
            }
        }
    }
}

这两个结果是相同的.