[Jetpack Compose] Listの基本

Contents 非表示

リストの作成

リストの作成

基本的なリスト

@Composable
fun SimpleList() {
	LazyColumn(
		modifier = Modifier.padding(12.dp)
	) {
		items(10) { index ->
			Text(text = "Item $index")
		}
	}
}

items関数でリストのアイテム数を指定し、各アイテムのコンポーザブルをラムダ式で定義します。

データクラスを使ったリスト

data class MockItem(
	val id: Int,
	val name: String
)

@Composable
fun DataClassList(items: List<MockItem>) {
	val mockItem = listOf(
		MockItem(id = 1, name = "Japan"),
		MockItem(id = 2, name = "America"),
		MockItem(id = 3, name = "France"),
		MockItem(id = 4, name = "Spain"),
		MockItem(id = 5, name = "India"),
		MockItem(id = 6, name = "China")
	)
	LazyColumn(
		modifier = Modifier.padding(12.dp)
	) {
		items(items) { item ->
			Text(text = item.name)
			Divider() // 区切り線
		}
	}
}

クリック可能アイテム

@Composable
fun ClickableList(items: List<MockItem>) {
	val selectedItem = remember { mutableStateOf<MockItem?>(null) }
	val mockItem = listOf(
		MockItem(id = 1, name = "Japan"),
		MockItem(id = 2, name = "America"),
		MockItem(id = 3, name = "France"),
		MockItem(id = 4, name = "Spain"),
		MockItem(id = 5, name = "India"),
		MockItem(id = 6, name = "China")
	)
	LazyColumn(
		modifier = Modifier.padding(12.dp)
	) {
		items(items) { item ->
			Text(
				text = item.name,
				modifier = Modifier.clickable {
					selectedItem.value = item
				}
			)
		}
	}
}

clickable修飾子を使ってアイテムをクリック可能にし、クリックされたアイテムをselectedItemの状態として保持させることができます。

水平リスト（LazyRow）

@Composable
fun HorizontalList(items: List<MockItem>) {
	val selectedItem = remember { mutableStateOf<MockItem?>(null) }
	val mockItem = listOf(
		MockItem(id = 1, name = "Japan"),
		MockItem(id = 2, name = "America"),
		MockItem(id = 3, name = "France"),
		MockItem(id = 4, name = "Spain"),
		MockItem(id = 5, name = "India"),
		MockItem(id = 6, name = "China")
	)
	LazyRow {
		items(items) { item ->
			Text(
				text = item.name,
				modifier = Modifier.padding(12.dp)
			)
		}
	}
}

グリッドリスト（LazyVerticalGrid）

@Composable
fun GridList(items: List<MockItem>) {
	val mockItem = listOf(
		MockItem(id = 1, name = "Japan"),
		MockItem(id = 2, name = "America"),
		MockItem(id = 3, name = "France"),
		MockItem(id = 4, name = "Spain"),
		MockItem(id = 5, name = "India"),
		MockItem(id = 6, name = "China")
	)
	LazyVerticalGrid(columns = GridCells.Fixed(3)) {
		items(items) { item ->
			Text(
				text = item.name,
				modifier = Modifier.padding(12.dp)
			)
		}
	}
}

動的なリストの更新

@Composable
fun DynamicList(items: List<MockItem>) {
	LazyColumn {
		items(items, key = { item -> item.id }) { item ->
			Text(text = item.name)
		}
	}
}

リストのアイテムが動的に更新される場合、keyパラメータを使ってアイテムの識別子を指定することで、Composeは変更されたアイテムのみを再コンポーズし、パフォーマンスを向上させることができます。

スクロール状態の管理

@Composable
fun ScrollableList(items: List<MockItem>) {
	val listState = rememberLazyListState()
	val mockItem = listOf(
		MockItem(id = 1, name = "Japan"),
		MockItem(id = 2, name = "America"),
		MockItem(id = 3, name = "France"),
		MockItem(id = 4, name = "Spain"),
		MockItem(id = 5, name = "India"),
		MockItem(id = 6, name = "China")
	)
	LazyColumn(state = listState) {
		items(mockItem) { item ->
			Text(text = item.name)
		}
	}
}