[Android] LazyColumn / LazyRow 사용법 (Jetpack Compose)

LazyColumn 사용법

기본사용법

@Composable
fun LazyColumnExample() {
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.spacedBy(8.dp),  // 아이템 간 간격
        contentPadding = PaddingValues(16.dp)  // 전체 리스트의 패딩
    ) {
        items(20) { index ->
            Text(
                text = "Item #$index",
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp)
                    .background(Color.LightGray)
            )
        }
    }
}

 

• modifier: 전체 리스트의 크기 및 스타일 지정
• contentPadding: 리스트의 내부 패딩 설정
• verticalArrangement: 항목 사이 간격 설정 (예: spacedBy(8.dp), Arrangement.Center)
• items(count: Int) {}: 개수만큼 리스트 아이템을 생성

 

 

LazyRow 사용법

기본사용법

@Composable
fun LazyRowExample() {
    LazyRow(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.spacedBy(8.dp),  // 아이템 간 간격
        contentPadding = PaddingValues(horizontal = 16.dp)  // 좌우 패딩
    ) {
        items(10) { index ->
            Box(
                modifier = Modifier
                    .size(100.dp)
                    .background(Color.Cyan),
                contentAlignment = Alignment.Center
            ) {
                Text(text = "Item #$index")
            }
        }
    }
}

• modifier: 전체 리스트의 크기 및 스타일 지정
• horizontalArrangement: 아이템 간 간격 설정 (예: spacedBy(8.dp))
• contentPadding: 리스트 전체의 내부 패딩 설정
• items(count: Int) {}: 개수만큼 리스트 아이템을 생성

 

 

Items() 활용법

리스트 개수 지정 (items(count))

items(10) { index ->
    Text(text = "Item #$index")
}

리스트 데이터 사용 (items(List))

val names = listOf("Alice", "Bob", "Charlie")
LazyColumn {
    items(names) { name ->
        Text(text = name)
    }
}

리스트 데이터 + 키 지정 (items(List, key))

val users = listOf(User(1, "Alice"), User(2, "Bob"))

LazyColumn {
    items(users, key = { it.id }) { user ->
        Text(text = user.name)
    }
}

 

 

LazyColumn 스크롤 제어

• rememberLazyListState()를 사용하여 스크롤을 제어할 수 있다.

@Composable
fun LazyColumnWithScroll() {
    val listState = rememberLazyListState()

    LazyColumn(state = listState) {
        items(50) { index ->
            Text(text = "Item #$index", modifier = Modifier.padding(16.dp))
        }
    }

    LaunchedEffect(Unit) {
        listState.scrollToItem(10)  // 10번째 아이템으로 바로 스크롤
    }
}