Jetpack Compose - LazyRow、LazyColumn

技術標籤：Jetpack-Compose Jetpack Compose LazyRow LazyColumn LazyRowFor

Jetpack Compose - LazyRow、LazyColumn

Compose系列文章，請點原文閱讀。原文，是時候學習Compose了！

0、介紹

前面我們學習了可以滾動的檢視ScrollableRow、ScrollableColumn，當內容過長時可以使其子級進行滾動展示。但是如果遇到超長列表的情況，滾動檢視就不可用了，因為滾動檢視沒有快取機制，當列表過長的時候，很容易造成記憶體溢位的情況。

所以這篇文章大就一起來看下Compose給出的解決方案-LazyRow、LazyColumn，官方介紹如下：

LazyRow

僅組成和放置 當前可見項 的水平滾動列表。它允許您放置不同型別的子級內容。例如，您可以使用LazyListScope.item新增單個專案，然後使用LazyListScope.items或者LazyListScope.itemsIndexed新增專案列表，後者有當前列表項的索引值。

LzayColumn

僅組成和放置 當前可見項 的豎直滾動列表。它允許您放置不同型別的子級內容。例如，您可以使用LazyListScope.item新增單個專案，然後使用LazyListScope.items或者LazyListScope.itemsIndexed新增專案列表，後者有當前列表項的索引值。

也就是說我們可以使用LazyListScope.item來單獨新增列表的頭和尾的內容，或者是新增不同型別的子級內容。

1、屬性一覽

【目前基於alpha08版本】

LazyRow佈局的函式如下：

@Composable fun LazyRow(
    modifier: Modifier = Modifier, 
    state: LazyListState = rememberLazyListState(), 
    contentPadding: PaddingValues = PaddingValues(0.dp), 
    verticalAlignment: Alignment.Vertical = Alignment.Top, 
    content: LazyListScope.() -> Unit
): Unit

屬性引數含義：

引數	含義
modifier: Modifier = Modifier	應用於佈局的修飾符
state: LazyListState = rememberLazyListState()	用於控制或觀察列表狀態的狀態物件
contentPadding: PaddingValues = PaddingValues(0.dp)	子級內容邊界和LazyRow邊界的距離
verticalAlignment: Alignment.Vertical = Alignment.Top	佈局子級的垂直對其方式，預設從佈局頂部對齊（同Row相關引數的含義）
content: LazyListScope.() -> Unit	描述內容的程式碼塊。您可以使用LazyListScope.item方法來新增單個專案，或者使用LazyListScope.items、LazyListScope.itemsIndexed的方法來新增專案列表。

LazyColumn的函式如下;

@Composable fun LazyColumn(
    modifier: Modifier = Modifier, 
    state: LazyListState = rememberLazyListState(), 
    contentPadding: PaddingValues = PaddingValues(0.dp), 
    horizontalAlignment: Alignment.Horizontal = Alignment.Start, 
    content: LazyListScope.() -> Unit
): Unit

所有引數都同之前的Row和Column的類似，這裡不再贅述。

LazyRowFor、LazyRowForIndexed、LazyColumn、LazyColumnForIndexed

這四個函式都分別繼承自LazyRow和LazyColumn，但是他們的功能更加單一，無法使用LazyListScope.item來新增單個專案，只能使用LazyItemScope.(T)來新增列表內容，具體使用方法請見下文。

2、使用示例

橫向和豎向的功能類似，這裡我們使用 LazyRow 來進行展示，使用item方法新增藍色的頭部和尾部，使用items方法新增列表內容（itemsIndexed會包含列表項的索引值，請根據情況使用），列表項根據索引使用不同的背景色，程式碼如下：

@Composable
fun LazyRowDemo() {

    val listData = (0..9).toList()
    LazyRow(content = {

        //頭部內容
        item {
            Box(
                modifier = Modifier
                    .size(100.dp)
                    .background(Color.Blue),
                contentAlignment = Alignment.Center
            ) {
                Text(text = "頭部")
            }
        }

        //列表內容
        items(listData) {
            Box(
                modifier = Modifier
                    .size(100.dp)
                    .background(
                        if (it % 2 == 0) {
                            Color.Red
                        } else {
                            Color.Yellow
                        }
                    ),
                contentAlignment = Alignment.Center
            ) {
                Text(text = "列表項：$it")
            }
        }

        //尾部內容
        item {
            Box(
                modifier = Modifier
                    .size(100.dp)
                    .background(Color.Blue),
                contentAlignment = Alignment.Center
            ) {
                Text(text = "尾部")
            }
        }
    })
}

實現效果如下所示：
在這裡插入圖片描述
至於其他的四個佈局都是繼承自LazyRow或者LazyColumn的，而且其內容沒有區分item和items、itemsIndexed等屬性了，只有單一的items和itemsIndexed屬性，方便更加純粹的實現一個簡單列表，這裡就不做示例了。

3、版本更新

暫無

4、未解決問題

其實到目前的情況，一個基本的RecyclerView我們已經可以實現了，而且沒有Adapter的概念，直接宣告你的列表項是什麼樣子的就可以了，真的是超級簡單。
但是在專案實際的使用中，我們可能需要下拉重新整理，上拉載入等效果，這個我們後文繼續研究，目前僅做了靜態的列表展示。
接下的文章我們將結合Jetpack ViewModel、LiveData等來實現一個簡單的直播間頁面（當然不會有視訊預覽的畫面，就用圖片做背景來代替吧，哈哈哈）。

Jetpack Compose - LazyRow、LazyColumn