LazyColumnは、垂直方向に要素を配置するためのUI部品です。
LazyColumnを使用すると、リストやスクロール可能なビューを作成することができます。
通常のColumnと異なり、LazyColumnはリストの要素が非常に大量であり、画面上に一度に表示できない場合に特に有用です。これは、アイテムが必要なときにのみ要素を作成し、画面の外にスクロールされるとアイテムを再利用するためです。
目次
LazyColumnの使い方
LazyColumn {
items(yourList) { item ->
// ここにリストアイテムのコンテンツを追加
}
}yourListのところに、あなたが表示したい要素のリストをセットします。
itemはリスト内の各要素に対応します。
簡単な例として、1〜100までの数字リストを表示してみましょう。
package com.naoyaono.jetbmicalculator
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
@Composable
fun MyComposable() {
var numbers:List<Int> = (1..100).toList()
LazyColumn(
modifier = Modifier.fillMaxWidth(),
horizontalAlignment = Alignment.Start
) {
items(numbers){ number ->
Box(
modifier = Modifier.height(24.dp)
){
Text(
text = number.toString(),
modifier = Modifier.padding(start = 8.dp)
)
}
}
}
}
@Preview(showBackground = true, widthDp = 200)
@Composable
fun MyComposablePreview() {
MyComposable()
}要素をタップしたときの処理を追加する
一覧の各要素をタップしたときの処理を追加したい場合は、clickableを使用します。
先ほどの例の場合は、Boxのmodifierに追加します。
Box(
modifier = Modifier
.height(24.dp)
.clickable {
// タップしたときの処理
}
){
Text(
text = number.toString(),
modifier = Modifier.padding(start = 8.dp)
)
}LazyColumnにヘッダーやフッターを追加する
LazyColumnには、フッターやヘッダーを追加するための特別なメソッドは提供されていませんが、LazyColumn内で通常のComposable要素を使用してこれらを作成できます。
以下、その例です。
LazyColumn {
// ヘッダーのComposable要素
item {
Text(
text = "ヘッダー",
modifier = Modifier.fillMaxWidth().padding(8.dp)
)
}
// コンテンツ一覧
items(items = yourList) { item ->
// リストアイテムのコンテンツ
Text(text = item)
}
// フッターのComposable要素
item {
Text(
text = "Footer",
modifier = Modifier.fillMaxWidth().padding(8.dp)
)
}
}
Comment