1. Introduction

LazyColumn

Forming and placing only a vertical scrolling list of currently visible items, the content block defines a DSL that allows you to place a subset of different types of content. For example, you can add a single item using LazyListScope.item and a list of items using lazyListScope.items.

LazyRow

A content block defines a DSL that allows you to place subsets of content of different types. For example, you can add a single item using LazyListScope.item and a list of items using lazyListScope.items.

LazyVerticalGrid

It only forms visible rows in the grid. This API is unstable (for the future), so consider using stable components like LazyColumn and ROW to achieve the same effect.

2. Attribute overview

@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 UnitCopy the code
@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 UnitCopy the code
@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
)
Copy the code
parameter meaning
modifier: Modifier = Modifier Layout modifier
verticalArrangement: Arrangement.Vertical = Arrangement.Top Vertical placement of sub-layout levels, from Top to Bottom by default
horizontalAlignment: Alignment.Horizontal = Alignment.Start Vertical placement at the sub-layout level, starting at start by default
state: LazyListState = rememberLazyListState() A state object used to control or observe list state
contentPadding: PaddingValues = PaddingValues(​0.​dp) The child content boundary is between LazyColumn and LazyRow,

Cannot be implemented by setting Modifier.
reverseLayout: Boolean = false Reverse the scrolling and layout orientation so that the real project is composed from the bottom up,

LazyListState. FirstVisibleItemIndex = = 0 means we scroll to the bottom
FlingBehavior = ScrollableDefaults.​flingBehavior() Interface to specify throwing behavior. When dragging ends with Velocity in scrollable

Is called to perform the fling through ScrollScope. ScrollBy

Animation and status updates for those interestedflinger
cells: GridCells Describe how cells form columns in vertical or horizontal grids

Row, for vertical LazyVerticalGrid Fixed(3), which means there are 3 columns,

Occupying 1/3 of the width of the parent,Adaptive(Val minSize: Dp) is the minSize space of each cell
content: BoxScope.() -> Unit Sub-layout content

Box extension function in the Modifier

  • fun Modifier.weight( /@floatrange (from = 0.0, fromInclusive = false)/ weight: Float, fill: Boolean = true ): Modifier

The weight assignment function for Column and Row. Weight: Float is proportional. Fill: Boolean = true Whether to fill

  • fun Modifier.align(alignment: Alignment.Vertical): Modifier

Similar to setting layout_gravity, most controls have functions that I won't go into too much detail

  • fun Modifier.alignByBaseline(): Modifier

Baseline alignment

  • fun Modifier.alignBy(alignmentLineBlock: (Measured) -> Int): Modifier
  • fun Modifier.alignBy(alignmentLine: HorizontalAlignmentLine): Modifier

3 Example

LazyColumn use

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") } }Copy the code

LazyRow use

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") } }Copy the code

LazyVerticalGrid use

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")
    }
}
Copy the code

Set up the VerticalGrid for two columns

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))
    }
}
Copy the code

Set the total width of the Modifier. Width (250.dp) and the minimum width of each item to Gridcells.adaptive (60.dp), so that only four items can be placed in a row and the next group of items will continue to be arranged vertically