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排列下去