【Android Jetpack Compose】ヘッダー + 複数列アイテムビューを同時スクロールさせる

はじめに

Android Jetpack Composeで、ヘッダー + 複数列アイテムビューを同時スクロールさせる方法について解説。

方法

複数列アイテムビュー描画のために、LazyVerticalGridを用いる。 ヘッダーもスクロールさせたいので、LazyVerticalGrid内にヘッダーを記述するのがポイント。

LazyVerticalGrid(
columns = GridCells.Fixed(3),
modifier = Modifier.padding(innerPadding),
) {
    // ここにヘッダーを記述
    items(
        count = 1,
        span = { GridItemSpan(3) } //列の数と同じにする
    ) {
        Text(
            text = "Header",
            fontSize = 28.sp,
            modifier = Modifier
                .background(color = getRandomColor())
                .padding(28.dp),
            textAlign = TextAlign.Center
        )
    }

    // ここにアイテムを記述
    items(60) {
        Text(
            text = "Item",
            fontSize = 28.sp,
            modifier = Modifier
                .background(color = getRandomColor())
                .padding(28.dp),
            textAlign = TextAlign.Center
        )
    }
}

その他の方法

FlowRowを用いる方法もある。

developer.android.com

参考サイト

stackoverflow.com