Jetpack Compose | Compose 滑动列表真的需要使用LazyColumn吗？No No No!_jetpack compose colum可滚动

Jetpack Compose | 控件篇（五）-- Spacer、LazyRow、LazyColumn & 让Column可滑动

在上一篇中，我们完成了 Box、Row、Column 相关内容的学习，并且留下了一个疑问：“如果容器大小不足以承载内容，怎么处理呢？”，这一篇我们一起学习这部分内容。

文中代码均基于 1.0.1版本

如无特殊说明，文中的 Compose 均指代 Jetpack compose

文中代码均可在 WorkShop 中获取，本篇代码集中于 post29 & post30 包下

完整系列目录: Github Pages | 掘金 | csdn

和Android进行简单对比

在Android中，SDK提供了诸如： ScrollView NestedScrollView ListView GridView RecyclerView，等针对各类场景下适用的控件，
基于滑动手势调整内容展示区域，以达到显示更多内容的目的。

进一步探索可以发现：View本身就包含了Scroll机制的 半成品实现，当然，本文我们不去深究Android的内容，借助我们已经掌握的Android知识，引出一点：

基于Scroll机制，用小容器展现大内容的本质：在视图测量的基础上，结合滑动手势处理，调整内容布局，绘制后展现。

在早期的一些文章中，有博主提到：Compose中对应的内容为 ScrollRow，ScrollColumn / LazyRow、LazyColumn。

在早期的预览版中，短暂的存在过 ScrollRow，ScrollColumn等内容，似乎已经被移除

Compose中也是按照这样的思路设计的，我们将在后续的文章中再细致地展开研究，本篇中仅学习如何使用它们。

在真正开始这部分内容之前，先补充一个简单的控件 Spacer，可以简单的创建占位间距，后续的文章中已经没有他的位置了。

Spacer

在之前的文章中，我们学习过Modifier，其中包含一些和布局相关的API，例如：padding、offset，但并无 margin 等内容，按照业内惯例，
如果已经存在一个广为接受的名词，一般不会使用新词，至少词根是一致的
，在Compose中，使用了Spacer，取缔了Margin的一些使用场景。

注：计算总是有损耗的，不要滥用Spacer,并且很多场景下有特定的方式处理间距，后续会逐渐学习到

如何使用

@Composable
fun Spacer(modifier: Modifier)
1
2

一般只需要指定他的宽高尺寸即可，例如：

Spacer(modifier = Modifier.size(3.dp))
1

LazyColumn

在上一篇文章中，我们已经学习过 Row和Column，它们仅仅是在方向上不一致，在实现上非常类似。同样的，LazyRow和LazyColumn也是如此。

Doc中提到：

The vertically scrolling list that only composes and lays out the currently visible items.
The content block defines a DSL which allows you to emit items of different types.
For example you can use LazyListScope.item to add a single item and LazyListScope.items to add a list of items.

仅 组合计算 以及 布局 当前可见元素的纵向可滑动列表。内容块定义了一个DSL，允许创建不同类型的元素。

例如：使用 LazyListScope.item 添加单个元素， LazyListScope.items 添加元素列表。

注：“内容块定义了一个DSL，允许创建不同类型的元素”，这并不同于Android中概念： RecyclerView#Adapter 具有将数据映射为同类型 ViewHolder 或 不同类型 ViewHolder
的能力。而是指 "添加元素时可以是 单个元素，或者是 元素的列表，这是不同的类型。
字面翻译在中文语境下容易造成误解。

很显然，它类似于Android中的 ListView,RecyclerView, 着重点在于 Lazy，不会将元素一股脑的全计算、布局出来。

所以，它并不对标ScrollView，在它的使用场景下，可滑动需求非常普遍，便默认实现了！

我们前面提到：

在早期的一些文章中，有博主提到：Compose中对应的内容为 ScrollRow，ScrollColumn / LazyRow、LazyColumn

这本没有啥错误，但绝不是被曲解的： “Row和Column 无法提供滑动能力，而是需要使用 LazyRow、LazyColumn”

但气氛已经烘托到这里了，那我们先将其学完，再学习 Row和Column 如何提供滑动能力。

如何使用

@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
)
1
2
3
4
5
6
7
8
9
10
11
12

各个参数含义：

• modifier：修饰器
• state：用于控制或者观测列表状态
• contentPadding：整体内容周围的一个Padding，注：内容四周的留白，以纵向列表为例，尾部没有展示时看不到尾部的留白 这通过Modifier无法实现，
  注：Modifier只能实现列表容器固定的留白间距 。可以使用它在第一个元素前和最后一个元素后留白。 如果需要在元素间留出间距，可以使用 verticalArrangement
• reverseLayout：是否反转列表
• verticalArrangement：子控件纵向的范围。可用于添加子控件之间的间距，以及内容不足以填满列表最小尺寸时，如何排布
• horizontalAlignment：子控件横向对齐方式
• flingBehavior：fling行为的处理逻辑
• content：声明了如何提供子控件的DSL，有两种方式

@LazyScopeMarker
interface LazyListScope {
   

    fun item(key: Any? = null, content: @Composable LazyItemScope.() -> Unit
1
2
3
4