android Jetpack组成:创建没有lazyvertical的网格布局gridlayout

jgwigjjp  于 2023-03-21  发布在  Android
关注(0)|答案(1)|浏览(117)

开发一个信使应用程序UI,并得到了最后一分钟的要求,以支持网格布局。由于我的信使容器屏幕结构的方式,我不能使用LVGL,因为根父视图包含的消息是一个LazyColumn。创建一个网格手动是足够简单,但我不确定如何处理最后一行内容,因为没有足够的元素来填充该行。我希望能够依靠合成来自动将按钮大小调整为与整行中的按钮相同的尺寸,以便列对齐。

目前,我的实现将权重为1f的Row修饰符传递给网格行中的每个按钮。如果没有足够的元素来填充一行,我将创建该行中第一个元素的不可见且不可单击的副本来填充该行。
我对度量工作原理的理解非常薄弱。有什么更有机的方法可以让组合按我想要的方式调整按钮大小,即使没有足够的元素来保证它?
或者,如果有一种方法可以处理LazyVerticalGridLayout,以便我可以将它与父LazyColumn一起使用,只需进行最少的调整,那也可以吗?

ulmd4ohb

ulmd4ohb1#

在合成版本1.4.0-rc01中,有一个名为FlowRowFlowColumn的新结构,在您的情况下,您需要FlowRow。为了简单起见,它将元素放置在屏幕上,如果没有足够的空间放置下一个元素,它将继续在以下行中,如文档中所述:

FlowRow是在LTR布局中从左向右(ltr)或在RTL布局中从右向左(rtl)填充项目的布局,当空间用完时,移动到底部的下一个“行”或“行”,然后继续填充项目,直到项目用完。

我认为它非常适合您的情况,您可以使用它来创建一个非懒惰的网格,并且它也可以在LazyColumn中工作,所以您当前的布局不会有问题。我将向您展示一个如何使用它的简单示例:

@Composable
fun ClockButton(
    modifier: Modifier = Modifier,
    clock: String,
    onClick: () -> Unit
) {
    OutlinedButton(
        modifier = modifier,
        onClick = onClick,
        border = BorderStroke(2.dp, Color.Red)
    ) {
       Text(text = clock, color = Color.Red)
    }
}

@OptIn(ExperimentalLayoutApi::class)
@Composable
fun Grid() {
    LazyColumn(
        modifier = Modifier.fillMaxSize().padding(16.dp),
        verticalArrangement = Arrangement.Center
    ) {

        item {
            Text(
                modifier = Modifier.padding(bottom = 16.dp),
                text = "Morning",
                style = MaterialTheme.typography.titleMedium
            )
        }
        item {
            FlowRow(
                horizontalArrangement = Arrangement.spacedBy(16.dp),
            ) {
                ClockButton(
                    clock = "10:00 AM",
                    onClick = {}
                )
                ClockButton(
                    clock = "10:30 AM",
                    onClick = {}
                )
                ClockButton(
                    clock = "11:00 AM",
                    onClick = {}
                )

                ClockButton(
                    clock = "11:30 AM",
                    onClick = {}
                )

            }
        }
    }
}

结果:

相关问题