kotlin Jetpack Composer中自定义网格

nr9pn0ug  于 2022-11-25  发布在  Kotlin
关注(0)|答案(1)|浏览(156)

我需要制作一个网格,在网格的每一行中,其中一个元素需要比另一个元素占据更多的空间。例如,第1行有元素0和1,元素1必须比第1行多。在第2行中,元素0必须比元素1大。我已经尝试了几次LazyGrid和其他我找到的自定义网格,但是我找不到一个能满足这个结果的网格。我该如何制作一个像下图所示的网格呢?

uplii1fm

uplii1fm1#

您可以使用Google Compandist FlowLayout函数(如FlowRow / FlowColumn组合)创建具有自定义行/列大小的列表。
您需要添加Google随行人员FlowLayout依赖项。

repositories {
    mavenCentral()
}

dependencies {
    implementation "com.google.accompanist:accompanist-flowlayout:0.27.1"
}

从FlowLayout文档:

Unlike the standard Row and Column composables, these layout children
across multiple rows/columns if they exceed the available space.

编辑:

FlowRow()具有换行功能,如果项目不适合现有行,则将其移动到新行。

@Composable
fun MyList(myList: State<List<String>>) {
    FlowRow(
        modifier = Modifier.padding(8.dp),
        mainAxisAlignment = MainAxisAlignment.SpaceBetween,
        mainAxisSize = SizeMode.Expand,
        crossAxisSpacing = 10.dp,
        mainAxisSpacing = 8.dp
    ) {
        myList.forEach { item ->
            Text(
                text = item,
                modifier = Modifier
                    .background(
                        color = Color.Gray,
                        shape = RoundedCornerShape(4.dp)
                    )
                    .padding(8.dp),
                overflow = TextOverflow.Ellipsis,
                maxLines = 1
            )
        }
    }
}

相关问题