@ExperimentalFoundationApi
@Composable
fun A {
LazyVerticalGrid {
...
}
}
@ExperimentalFoundationApi
@Composable
fun B {
A {..}
}
@ExperimentalFoundationApi
@Composable
fun C {
B {..}
}
...
sealed class GridCells {
abstract val columns: Int
data class Fixed(val count: Int) : GridCells() {
override val columns: Int = count
}
object Adaptive : GridCells() {
override val columns: Int = 1
}}
@Composable
fun VerticalGrid(
modifier: Modifier = Modifier,
gridCells: GridCells,
totalItems: Int,
contentPadding: PaddingValues = PaddingValues(0.dp),
content: @Composable (Int) -> Unit,
) {
Column(modifier = modifier) {
val columnCount = when (gridCells) {
is GridCells.Fixed -> gridCells.columns
is GridCells.Adaptive -> ceil(sqrt(totalItems.toDouble())).toInt()
}
val rowCount = ceil(totalItems.toDouble()/columnCount).toInt()
for(i in 0 until rowCount){
Row(Modifier.fillMaxWidth()) {
for (j in 0 until columnCount) {
val index = j + i * columnCount
Box(
Modifier
.weight(1f)
.padding(contentPadding)
) {
if (index < totalItems) {
content(index)
}
}
}
}
}
}
9条答案
按热度按时间oxalkeyp1#
通过
1.x.y
,LazyVerticalGrid
组合工具为在网格中显示项目提供了实验支持。columns = GridCells.Fixed(4)
意味着有4列,是父列宽度的1/4。columns = GridCells.Adaptive(minSize = 64.dp)
将意味着将存在尽可能多的列,并且每一列将至少为64.dp,并且所有列将具有相等的宽度。uwopmtnx2#
UPD:Compose版本1.0.0-alpha 09引入标准组件:
惰性垂直网格
另一种基于LazyColumn的解决方案(Jetpack Compose版本1.0.0-alpha 04)
unguejic3#
正如@Pavel Marchenko提到的,
LazyVerticalGrid
是从1.0.0-alpha09
版本添加的下面是一个简单的例子:
gywdnpxw4#
我创建了一个自适应网格布局:
上一页
代码
完整的代码在这里。
我决定实现我自己的自适应网格布局,因为现有的LazyVerticalGrid是实验性的,将来可以删除,要使用它,你必须递归地注解使用它的compostable:
或使用需要
-Xopt-in=kotlin.RequiresOptIn
编译器参数的@OptIn(ExperimentalFoundationApi::class)
。lsmd5eda5#
更新@Pavel Marchenko的答案,因为一些compose函数的名称发生了变化:需要使用LazyColumn()代替LazyColumn()并使用items()函数:
pgx2nnw86#
我已经创建了一个自定义的gridview使用android jetpack撰写,直到他们将不支持官方recycleview的Gridlayout在撰写。
用途
项目声明
lskq00tm7#
由于LazyVerticalGrid不能在LazyColumn中使用,因此不能在可滚动页面中使用它。我在compose中创建了一个自定义LazyGrid实现库。它是懒惰的,所以它的性能非常好。对于不同的场景有不同的项目放置类型,并且非常容易用途:
还有一个可折叠的版本。更多信息,文档,源代码和演示可以在以下位置找到:https://github.com/yusufarisoy/lazy-grid
它也是可重启和可跳过的,以使compose编译器以最佳性能工作。https://chris.banes.dev/composable-metrics/
n1bvdmb68#
对@Madhav的答案做了一些修改(使用
compose v1.0.0-alpha01
):用途:
lp0sw83n9#
LazyVerticalGrid使用滚动状态,从而使其在LazyColum中无用
这里的实现只使用行和列
}