[Jetpack Compose] 4. 리스트, LazyColumn

아래 영상을 보고 정리한 게시글입니다.

https://www.youtube.com/watch?v=amPLduPYhLk&list=PLxTmPHxRH3VV8lJq8WSlBAhmV52O2Lu7n&index=4 

---

비슷한 view

기존 안드로이드 view 중 비슷한 view

• ListView
• RecyclerView

---

반복문

Composable 객체 안에 반복문을 사용할 수 있음

@Preview(showBackground = true)
@Composable
fun TestView() {
    Column(
        modifier = Modifier
            .background(Color.Cyan)
            .fillMaxWidth()
    ) {
        for(i in 1..50) {
            Text("글씨 ${i}")
        }
    }
}

---

스크롤

modifier 안의 verticalScroll 으로 수직 스크롤 기능을 넣음

rememberScrollState : 스크롤 정보를 기억하는 객체

@Preview(showBackground = true)
@Composable
fun TestView() {
    val scrollState = rememberScrollState()

    Column(
        modifier = Modifier
            .background(Color.Cyan)
            .fillMaxWidth()
            .verticalScroll(scrollState)
    ) {
        for(i in 1..50) {
            Text("글씨 ${i}")
        }
    }
}

---

LazyColumn

Column - activity가 시작될 때 한번에 다 만듦

LazyColumn - composable 객체가 화면에 떠야할 때마다 만듦

recyclerview와 비슷하다

 

Column vs LazyColumn

(https://stackoverflow.com/questions/73734918/android-compose-difference-between-lazycolumn-and-column-with-verticalscroll)

 

+) 신기하게 스크롤 기능을 안넣어도 스크롤이 됨

 

for 사용 안됨 → items로 다수의 Composable 객체를 만들 수 있음

@Preview(showBackground = true)
@Composable
fun TestView() {
    LazyColumn(
        modifier = Modifier
            .background(Color.Cyan)
            .fillMaxWidth()
    ) {
        items(50) { index ->
            Text("글씨 ${index}")
        }
    }
}

---

Padding

contentPadding으로 padding을 줌

사방에 동일하게 패딩을 줌

@Preview(showBackground = true)
@Composable
fun TestView() {
    LazyColumn(
        modifier = Modifier
            .background(Color.Cyan)
            .fillMaxWidth(),
        contentPadding = PaddingValues(16.dp)
    ) {
        items(50) { index ->
            Text("글씨 ${index}")
        }
    }
}

---

아이템 간격

verticalArrangement로 간격을 줌

@Preview(showBackground = true)
@Composable
fun TestView() {
    LazyColumn(
        modifier = Modifier
            .background(Color.Cyan)
            .fillMaxWidth(),
        contentPadding = PaddingValues(16.dp),
        verticalArrangement = Arrangement.spacedBy(4.dp)
    ) {
        items(50) { index ->
            Text("글씨 ${index}")
        }
    }
}

---

item

객체 하나를 만들 때 사용

@Preview(showBackground = true)
@Composable
fun TestView() {
    LazyColumn(
        modifier = Modifier
            .background(Color.Cyan)
            .fillMaxWidth(),
        contentPadding = PaddingValues(16.dp),
        verticalArrangement = Arrangement.spacedBy(4.dp)
    ) {
        item {
            Text("Header")
        }
        items(50) { index ->
            Text("글씨 ${index}")
        }
        item {
            Text("Footer")
        }
    }
}