如何获得一个两列布局的平板电脑与android组成

mwkjh3gx  于 2023-02-10  发布在  Android
关注(0)|答案(1)|浏览(152)

我希望我的屏幕根据屏幕大小调整布局。我使用基本列表,并希望在手机上每行有一个列表项,在横向的平板电脑上每行应该有两个列表项。
我得到了这个代码的一个例子从谷歌,但这并不工作的列表大小(大小%2!= 0)因为这最后一个项目将被拉伸到这屏幕宽度

@Composable
fun PlanScreen(modifier: Modifier = Modifier, widthSizeClass: WindowWidthSizeClass, items: List<String>) {
    val numColumns = if(widthSizeClass == WindowWidthSizeClass.Expanded) 2 else 1
    Column(modifier = modifier.fillMaxSize()) {
        LazyColumn(modifier = modifier
            .fillMaxSize()
            .weight(1f),
            horizontalAlignment = Alignment.CenterHorizontally) {
            items(plan.chunked(numColumns)) {
                Row {
                    it.forEach {
                        ListItemTwoLine(modifier = Modifier.weight(1f), title = it, supportingText = it, icon = R.drawable.baseline_edit_24)
                    }
                }
            }
        }
    }
}
vxqlmq5t

vxqlmq5t1#

您可以尝试根据列数将列表项分成块,其思想是将列表分成长度为numColumns的较小子列表,这可以通过plan.chunked(numColumns)实现。
但是,如果列表中的项目数不能被numColumns整除,则最后一个块中的项目可能较少。在这种情况下,您可以添加一个条件来处理最后一个块只有一个项目的情况,并将其显示在单独的列中以防止拉伸。
可以使用以下代码来实现这一点:

@Composable
fun PlanScreen(modifier: Modifier = Modifier, widthSizeClass: WindowWidthSizeClass, items: List<String>) {
    val numColumns = if(widthSizeClass == WindowWidthSizeClass.Expanded) 2 else 1

    Column(modifier = modifier.fillMaxSize()) {
        items.chunked(numColumns).forEachIndexed { index, chunk ->
            Row {
                chunk.forEach {
                    ListItemTwoLine(modifier = Modifier.weight(1f), title = it, supportingText = it, icon = R.drawable.baseline_edit_24)
                }
                if (index == items.size / numColumns && items.size % numColumns != 0) {
                    Spacer(Modifier.weight(1f))
                }
            }
        }
    }
}

相关问题