Jetpack Compose - LazyColumn、LazyRow、LazyVerticalGrid全面解析

1.介绍

LazyColumn

仅构成和放置当前可见项的垂直滚动列表，内容块定义了一个DSL，它允许您放置不同类型的子集内容。例如，您可以使用LazyListScope.item添加单个项目，使用LazyListScope.items添加项目列表。

LazyRow

仅构成和放置当前可见项的水平滚动列表，内容块定义了一个DSL，它允许您放置不同类型的子集内容。例如，您可以使用LazyListScope.item添加单个项目，使用LazyListScope.items添加项目列表。

LazyVerticalGrid

它只构成网格中可见的行。此API不稳定(未来可期)，请考虑使用像LazyColumn和ROW这样的稳定组件来实现相同效果。

2.属性一览

@Composable
fun LazyColumn(
    modifier: Modifier = Modifier,
    state: LazyListState = rememberLazyListState(),
    contentPadding: PaddingValues = PaddingValues(0.dp),
    reverseLayout: Boolean = false,
    verticalArrangement: Arrangement.Vertical = if (!reverseLayout) Arrangement.Top else Arrangement.Bottom,
    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
    flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
    content: LazyListScope.() -> Unit
): @Composable Unit

@Composable
fun LazyRow(
    modifier: Modifier = Modifier,
    state: LazyListState = rememberLazyListState(),
    contentPadding: PaddingValues = PaddingValues(0.dp),
    reverseLayout: Boolean = false,
    horizontalArrangement: Arrangement.Horizontal = if (!reverseLayout) Arrangement.Start else Arrangement.End,
    verticalAlignment: Alignment.Vertical = Alignment.Top,
    flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
    content: LazyListScope.() -> Unit
): @Composable Unit

@Composable
fun LazyVerticalGrid(
    cells: GridCells,
    modifier: Modifier = Modifier,
    state: LazyListState = rememberLazyListState(),
    contentPadding: PaddingValues = PaddingValues(0.dp),
    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
    content: LazyGridScope.() -> Unit
)

参数	含义
modifier: Modifier = Modifier	布局修饰符
verticalArrangement: Arrangement.Vertical = Arrangement.Top	子布局级的垂直放置方式，默认从Top到Bottom
horizontalAlignment: Alignment.Horizontal = Alignment.Start	子布局级的垂直放置方式，默认从start开始
state: LazyListState = rememberLazyListState()	用于控制或观察列表状态的状态对象
contentPadding: PaddingValues = PaddingValues(​0.​dp)	子级内容边界距离LazyColumn、LazyRow的边界，
无法通过设置Modifier实现。
reverseLayout: Boolean = false	反转滚动和布局的方向，此时真正的项目将从下至上组成，
LazyListState.firstVisibleItemIndex==0 表示我们滚动到了底
FlingBehavior = ScrollableDefaults.​flingBehavior()	接口来指定投掷行为。当拖动以scrollable中的velocity结束
时，将调用performFling以通过ScrollScope.scrollBy执行fling
动画和更新状态有兴趣的同学可以参考flinger
cells: GridCells	描述单元格如何在垂直网格中形成列或在水平网格中形成
行, 对于垂直LazyVerticalGrid Fixed(3)，这意味着有3列，
占父级宽度的1/3,Adaptive(val minSize: Dp)是每个单元格的minSize空间
content: BoxScope.() -> Unit	子布局内容

Box中Modifier拓展函数

• fun Modifier.weight( /@FloatRange(from = 0.0, fromInclusive = false)/ weight: Float, fill: Boolean = true ): Modifier Column 和 Row的权重分配函数，weight: Float 为比例，fill: Boolean = true 是否填充满下文使用实例会具体介绍
• fun Modifier.align(alignment: Alignment.Vertical): Modifier 类似于设置layout_gravity，大多数控件都有的函数，不做过多介绍
• fun Modifier.alignByBaseline(): Modifier 基于baseline对齐
• fun Modifier.alignBy(alignmentLineBlock: (Measured) -> Int): Modifier
• fun Modifier.alignBy(alignmentLine: HorizontalAlignmentLine): Modifier

3使用实例

LazyColumn使用

val itemsList = (0..5).toList()
val itemsIndexedList = listOf("A", "B", "C")
LazyColumn {
    items(itemsList) {
        Text("Item is $it")
    }

    item {
        Text("Single item")
    }

    itemsIndexed(itemsIndexedList) { index, item ->
        Text("Item at index $index is $item")
    }
}

LazyRow使用

val itemsList = (0..5).toList()
val itemsIndexedList = listOf("A", "B", "C")
LazyRow{
    items(itemsList) {
        Text("Item is $it")
    }

    item {
        Text("Single item")
    }

    itemsIndexed(itemsIndexedList) { index, item ->
        Text("Item at index $index is $item")
    }
}

LazyVerticalGrid使用

LazyVerticalGrid(cells = GridCells.Fixed(2),Modifier.background(Color.Red) ) {
    items(itemsList) {
        Text("Item is $it")
    }

    item {
        Text("Single item")
    }

    itemsIndexed(itemsIndexedList) { index, item ->
        Text("Item at index $index is $item")
    }
}

设置两列的VerticalGrid

LazyVerticalGrid(modifier = Modifier.width(250.dp)
    .background(Color.Yellow),
    cells = GridCells.Adaptive(60.dp) ) {
    items(itemsList) {
        Text("Item is $it",Modifier.background(Color.Green))
    }

    item {
        Text("Single item",Modifier.background(Color.Blue))
    }

    itemsIndexed(itemsIndexedList) { index, item ->
        Text("Item at index $index is $item",Modifier.background(Color.Cyan))
    }
}

设置总宽度Modifier.width(250.dp),每个item最小宽度为GridCells.Adaptive(60.dp)，因此一行只能放下4个item,下一组item会继续沿着Vertical排列下去