Jetpack Compose - ScrollableRow、ScrollableColumn

技術標籤：Jetpack-Compose Jetpack Compose ScrollableRow Scrollable ScrollView

Jetpack Compose - ScrollableRow、ScrollableColumn

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

0、介紹

前面文章我們學習了Row和Column，當子級的內容超過Row和Column的寬高時，子級內容無法全部展示出來，佈局會出現異常。
所以針對這種情況，官方給出了ScrollableRow、ScrollableColumn的佈局方案，來看下官方的介紹。

ScrollableRow

當所有子級的寬度大於其寬度時，超過其寬度的子級內容會被裁剪，不可見，其可以以橫向滾動的方式展現全部子級內容。

ScrollableColumn

當所有子級的高度大於其高度時，超過其高度的子級內容會被裁剪，不可見，但其可以以縱向滾動的方式展現全部子級內容。

所以這麼看來，這兩個就是我們之前的ScrollView，只不過細分為了橫向和縱向兩個佈局。

1、屬性一覽

【目前基於alpha08版本】

ScrollableRow佈局的函式：

@Composable fun ScrollableRow(
    modifier: Modifier = Modifier, 
    scrollState: ScrollState = rememberScrollState(0f), 
    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start, 
    verticalAlignment: Alignment.Vertical = Alignment.Top, 
    reverseScrollDirection: Boolean = false, 
    isScrollEnabled: Boolean = true, 
    contentPadding: PaddingValues = PaddingValues(0.dp), 
    content: RowScope.() -> Unit
): Unit

屬性引數含義：

引數	含義
modifier: Modifier = Modifier	應用於佈局的修飾符
scrollState: ScrollState = rememberScrollState(0f)	滾動狀態，例如當前偏移量和最大偏移量
horizontalArrangement: Arrangement.Horizontal = Arrangement.Start	佈局子級的水平放置方式，預設從佈局開始往佈局結束方向放置（同Row相關引數的含義）
verticalAlignment: Alignment.Vertical = Alignment.Top	佈局子級的垂直對其方式，預設從佈局頂部對齊（同Row相關引數的含義）
reverseScrollDirection: Boolean = false	反轉滾動方向，如果為true，則ScrollState.value = 0表示向右；如果為false，則ScrollState.value = 0表示左側
isScrollEnabled: Boolean = true	用來啟用或禁用觸控滾動的引數。如果有ScrollState引數，則仍可以呼叫ScrollState.smoothScrollTo及其他相關方法。
contentPadding: PaddingValues = PaddingValues(0.dp)	子級內容邊界和ScrollableRow邊界的距離（注意不是子級內容之間的距離，切勿混淆）

ScrollableColumn

@Composable fun ScrollableColumn(
    modifier: Modifier = Modifier, 
    scrollState: ScrollState = rememberScrollState(0f), 
    verticalArrangement: Arrangement.Vertical = Arrangement.Top, 
    horizontalAlignment: Alignment.Horizontal = Alignment.Start, 
    reverseScrollDirection: Boolean = false, 
    isScrollEnabled: Boolean = true, 
    contentPadding: PaddingValues = PaddingValues(0.dp), 
    content: ColumnScope.() -> Unit
): Unit

屬性引數含義：

引數	含義
modifier: Modifier = Modifier	應用於佈局的修飾符
scrollState: ScrollState = rememberScrollState(0f)	滾動狀態，例如當前偏移量和最大偏移量
verticalArrangement: Arrangement.Vertical = Arrangement.Top	佈局子級的豎直放置方式，預設從佈局頂部往佈局底部方向放置（同Column相關引數的含義）
horizontalAlignment: Alignment.Horizontal = Alignment.Start	佈局子級的水平直對其方式，預設從佈局開始對齊（同Row相關引數的含義）

剩下的引數意思都一樣了，不再贅述，請看下文示例。

2、使用示例

因為這兩個佈局也很類似，我們只以ScrollableRow來進行示例，首先聲明瞭一個數組，然後根據該陣列的索引建立紅黃相間的Box，程式碼如下：

@Composable
fun ScrollableRowDemo() {

    val list = arrayOf(0, 1, 2, 3, 4)

    ScrollableRow {
        repeat(list.count()) {
            Box(
                Modifier
                    .height(100.dp)
                    .width(150.dp)
                    .background(
                        if (it % 2 == 0) {
                            Color.Yellow
                        } else {
                            Color.Red
                        }
                    )
            )
        }
    }
}

所以實現效果如下所示：
在這裡插入圖片描述
注意：
ScrollableXXX佈局中不可直接巢狀其它ScrollableXXX或者LazyXXXFor檢視，否則會報如下錯誤：
java.lang.IllegalStateException: Nesting scrollable in the same direction layouts like ScrollableRow and LazyRowFor is not allowed. If you want to add a header before the list of items please take a look on LazyRow component which has a DSL api which allows to first add a fixed element via item() function and then the list of items via items().

所以，如果你想在列表之前新增一個檢視，請使用LazyRow，它許先通過item()函式新增一個固定的元素，然後通過 items()新增專案列表。這就是類似之前的RecyclerView的內容了，我們下一章講解。

3、版本更新

暫無

4、未解決問題

關於ScrollView基本也就是使用它的滾動屬性，一般是個人主頁高度過高的時候可能使用到，或者其他情況，請根據場景使用。

Jetpack Compose - ScrollableRow、ScrollableColumn