Compose LazyColumn：LazyListScope DSL

投稿日: 　更新日:

LazyColumnはLazyListScope DSLコマンドを使ってアイテムの並びを記述します。

コマンドは7つあり、各々について例を示します。

※環境：Android Studio Koala | 2024.1.1
　　　　Kotlin 1.9.0
　　　　Compose Compiler 1.5.1
　　　　androidx.compose.foundation:foundation 1.6.8

スポンサーリンク

LazyListScope DSL一覧

LazyColumnはLazyListScope DSLコマンドを使ってアイテムの並びを記述します。

実装方法

表にあげるようなDSLコマンドが用意されています。

コマンド概要
item( )標準関数単体のアイテムを追加
items(count: Int)カウント値のアイテムを追加
stickyHeader( )リストの先頭に固定されるヘッダーを追加
items(items: Array)拡張関数Arrayで列挙されたアイテムを追加
items(items: List)Listで列挙されたアイテムを追加
itemsIndexed(items: Array)Arrayで列挙されたIndex付きアイテムを追加
itemsIndexed(items: List)Listで列挙されたIndex付きアイテムを追加
スポンサーリンク

item( )

item( )のサンプル
1
2
3
4
5
6
7
8
9
10
11
12
13
14
LazyColumn(modifier = Modifier.fillMaxSize()) {
    item { ItemBox { Text(text = "Item %02d".format(0)) } }
    item { ItemBox { Text(text = "Item %02d".format(1)) } }
    item { ItemBox { Text(text = "Item %02d".format(2)) } }
    item { ItemBox { Text(text = "Item %02d".format(3)) } }
    item { ItemBox { Text(text = "Item %02d".format(4)) } }
    item { ItemBox { Text(text = "Item %02d".format(5)) } }
    item { ItemBox { Text(text = "Item %02d".format(6)) } }
    item { ItemBox { Text(text = "Item %02d".format(7)) } }
    item { ItemBox { Text(text = "Item %02d".format(8)) } }
    item { ItemBox { Text(text = "Item %02d".format(9)) } }
    item { ItemBox { Text(text = "Item %02d".format(10)) } }
    item { ItemBox { Text(text = "Item %02d".format(11)) } }
}
ItemBox
ItemBox
1
2
3
4
5
6
7
8
9
10
11
12
13
14
@Composable
private fun ItemBox(
    containerColor: Color = MaterialTheme.colorScheme.secondaryContainer,
    content: @Composable () -> Unit
) {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(50.dp)
            .padding(bottom = 2.dp)
            .background(containerColor),
        contentAlignment = Alignment.Center
    ) { content() }
}

item( )のサンプル

スポンサーリンク

item(count: Int)

item(count: Int)のサンプル
1
2
3
4
5
LazyColumn(modifier = Modifier.fillMaxSize()) {
    items(12) {
        ItemBox { Text(text = "Item %02d".format(it)) }
    }
}

item(count: Int)のサンプル

itにカウント値が入ります。

スポンサーリンク

stickyHeader( )

stickyHeader( )のサンプル
1
2
3
4
5
6
7
8
9
LazyColumn(modifier = Modifier.fillMaxSize()) {
    @OptIn(ExperimentalFoundationApi::class)
    stickyHeader {
        ItemBox(containerColor = Color.LightGray) { Text(text = "Header") }
    }
    items(12) {
        ItemBox { Text(text = "Item %02d".format(it)) }
    }
}

stickyHeader( )のサンプル

一覧の最上に追加されたヘッダーは、上部に固定されてスクロールしません。

一覧の中間に追加されたヘッダーは、スクロールした後に上部に固定されます。

スポンサーリンク

items(items: Array)

items(items: Array)のサンプル
1
2
3
4
5
6
7
8
val ItemArray = Array(12) { it }
...
 
LazyColumn(modifier = Modifier.fillMaxSize()) {
    items(ItemArray) {
        ItemBox { Text(text = "Item %02d".format(it)) }
    }
}

items(items: Array)のサンプル

itにItemArrayの要素が入ります。

スポンサーリンク

items(items: List)

items(items: List)のサンプル
1
2
3
4
5
6
7
8
val ItemList = List(12) { it }
...
 
LazyColumn(modifier = Modifier.fillMaxSize()) {
    items(ItemList) {
        ItemBox { Text(text = "Item %02d".format(it)) }
    }
}

items(items: List)のサンプル

itにItemListの要素が入ります。

スポンサーリンク

itemsIndexed(items: Array)

itemsIndexed(items: Array)のサンプル
1
2
3
4
5
6
7
8
9
10
11
12
13
14
val ItemArray = Array(12) { (Math.random() * 100).toInt() }
...
 
LazyColumn(modifier = Modifier.fillMaxSize()) {
    itemsIndexed(ItemArray) { index, item ->
        val _containerColor = if(index % 2 == 0)
            MaterialTheme.colorScheme.tertiaryContainer
        else
            MaterialTheme.colorScheme.secondaryContainer
        ItemBox(containerColor = _containerColor) {
            Text(text = "Item %02d".format(item))
        }
    }
}

itemsIndexed(items: Array)のサンプル

スポンサーリンク

itemsIndexed(items: List)

itemsIndexed(items: List)のサンプル
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
val ItemList = List(12) { (Math.random() * 100).toInt() }
...
 
val _sortedItems = remember(ItemList) { ItemList.sortedDescending() }
LazyColumn(modifier = Modifier.fillMaxSize()) {
    itemsIndexed(_sortedItems) { index, item ->
        if(index == 0)
            ItemBox(containerColor = Color.LightGray) {
                Text(text = "Top 3")
            }
        if(index == 3)
            ItemBox(containerColor = Color.LightGray) {
                Text(text = "Other")
            }
        ItemBox { Text(text = "Score %02d".format(item)) }
    }
}

itemsIndexed(items: List)のサンプル

スポンサーリンク
ページのトップへ

関連記事：

Compose UI：LazyColumn
Compose LazyColumnCompose UIFlingBehaviorLazyColumnLazyLayoutLazyListScope DSLLazyListStateデザイン
Jetpack composeは、アプリ開発に必要な一通りのUIコンポーネントをライブラリで提供しています。 そのライブラリ中のLazyColumnについて、構成や使用方法などをまとめます。 ※環境：Android Studio Koala | 2024.1.1 　　　　Kotlin 1.9.0 　　　　Compose Compiler 1.5.1 　　　　androidx.compose.foundation:foundation 1.6.8 ...
続きを読む
Compose LazyColumn：アイテムの制御（Change/Insert/Move/Remove）
Compose LazyColumnLazyColumnLazyLayoutmutableStateListOfデザイン再Compose
LazyColumnは「複数のデータやオブジェクト」または「コレクション」を一覧（リスト）表示するUIです。 単純に一覧表示できれば良い用途もありますが、表示に加えてアイテムの制御（変更/追加/移動/削除）を必要とする場面が多くあります。 最近の携帯端末はパソコンと同じ利便性をアプリに求めますから、「データの表示だけでなく編集もできる」という機能は必須の要望です。 ここでは、LazyColumnでアイテムの制御を行う方法を紹介します。 ※環境：Android Studio Koala | 2024.1.1 　　　　Kotlin 1.9.0 　　　　Compose Compiler 1.5.1 　　　　androidx.compose.foundation:foundation 1.6.8 ...
続きを読む
Compose LazyColumn：Columnとの違い
ColumnCompose ColumnCompose LazyColumnLazyColumnLazyLayoutデザイン
LazyColumnとColumnはどちらも一覧（リスト）表示するUIです。 記述方法は違いますが、スクロールしたり、アイテムを制御したり、ほぼ同じことが出来ます。 ただし、両者の特徴により、向き不向きがあります。よく違いを理解して、適材適所で使い分けが必要です。 ここでは、両者の違いをまとめました。 ※環境：Android Studio Koala | 2024.1.1 　　　　Kotlin 1.9.0 　　　　Compose Compiler 1.5.1 　　　　androidx.compose.foundation:foundation 1.6.8 ...
続きを読む
Compose LazyColumn：List型入力による再Composeを回避
@ImmutableCompose LazyColumnImmutableListLazyColumnLazyLayoutデザイン再Compose
ある成果物の開発を進めるに時に、「先に問題へ対応する」と「後で問題へ対応する」では、後者の方が難易度は高いです。 開発は進むにつれて周辺との因果関係が複雑化ます。全体に影響を与えない形で問題へ対応することが、難しくなるからです。 不要な再Composeを回避する対応も同じだと思います。 ですので、発生源が明確で不要な再Composeは、コーディングの段階で潰しておくべきです。 ただし、不要な再Composeの発生源を知らなければ出来ません。 ここで紹介するList型入力は、不要な再Composeの発生源の一つです。 ※環境：Android Studio Koala | 2024.1.1 　　　　Kotlin 1.9.0 　　　　Compose Compiler 1.5.1 　　　　androidx.compose.foundation:foundation 1.6.8 　　　　kotlinx.collections.immutable 0.3.7 ...
続きを読む
Compose LazyColumn：ListStateによる再Composeを回避
Compose LazyColumnderivedStateOfLazyColumnLazyLayoutLazyListStateデザイン再Compose
ある成果物の開発を進めるに時に、「先に問題へ対応する」と「後で問題へ対応する」では、後者の方が難易度は高いです。 開発は進むにつれて周辺との因果関係が複雑化ます。全体に影響を与えない形で問題へ対応することが、難しくなるからです。 不要な再Composeを回避する対応も同じだと思います。 ですので、発生源が明確で不要な再Composeは、コーディングの段階で潰しておくべきです。 ただし、不要な再Composeの発生源を知らなければ出来ません。 ここで紹介するListStateは、不要な再Composeの発生源の一つです。 ※環境：Android Studio Koala | 2024.1.1 　　　　Kotlin 1.9.0 　　　　Compose Compiler 1.5.1 　　　　androidx.compose.foundation:foundation 1.6.8 ...
続きを読む
Compose UI：LazyRow
Compose LazyRowCompose UIFlingBehaviorLazyLayoutLazyListScope DSLLazyListStateLazyRowデザイン
Jetpack composeは、アプリ開発に必要な一通りのUIコンポーネントをライブラリで提供しています。 そのライブラリ中のLazyRowについて、構成や使用方法などをまとめます。 ※環境：Android Studio Koala | 2024.1.1 Patch 1 　　　　Kotlin 1.9.0 　　　　Compose Compiler 1.5.1 　　　　androidx.compose.foundation:foundation 1.6.8 ...
続きを読む
スポンサーリンク