JetPack Compose_ 리스트, LazyColumn

 

setContent {      
            Column(
                modifier = Modifier.background(color = Color.LightGray)
            ) {
                for(i in 1..50 ){
                    Text("글씨 $i")
                }
            }
        }

위와 같이 작성을 하게 되면 아래처럼 일정 부분은 짤린 채로 보여지게 되고 그 범위는 회색 부분에 해당한다.

 

setContent {
    val scrollState = rememberScrollState()

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

vertivalScroll이라는 속성을 추가하여 컬럼이 스크롤 되도록 설정해 줄 수 있다. 

(setContent 안에서만 컴포즈 관련된 코드를 집어 넣을 수 있다.)

스크롤 하여 밑에 짤렸던 부분으로 이동할 수 있음을 확인할 수 있다.

 

- Column은 아이템을 미리 정의 해둔 것 -> 데이터가 많을 때 성능 떨어짐

-그래서 Lazy Column 으로 대체

 

 setContent {
           LazyColumn(
                modifier = Modifier
                    .background(color = Color.LightGray)
                    .fillMaxWidth(),
               contentPadding = PaddingValues(16.dp),
               verticalArrangement = Arrangement.spacedBy(4.dp)

            ) {
                items(50){index->
                    Text("글씨 $index")
                }
            }
        }

public abstract fun items(
    count: Int,
    key: ((Int) → Any)?,
    itemContent: @Composable()
(LazyItemScope.(Int) → Unit)
): Unit

 

items(아이템 개수){인덱스 지정 ->

}

0부터 49 까지 50개가 출력이 되었고, 스크롤도 가능하다. 

 contentPadding = PaddingValues(16.dp) 는 4면에 패딩을 넣어주는 것이고

verticalArrangement = Arrangement.spacedBy(4.dp)는 아이템 사이에 간격을 넣어준다.

 

 

setContent {
   LazyColumn(
        modifier = Modifier
            .background(color = Color.LightGray)
            .fillMaxWidth(),
       contentPadding = PaddingValues(16.dp),
       verticalArrangement = Arrangement.spacedBy(4.dp)

    ) {
       item {
           Text("Header")
       }
        items(50){index->
            Text("글씨 $index")
        }
       item {
           Text("Footer")
       }
   }
}

위 아래로 item 하나만 넣을 수 도 있다. 

item{ Text("Header") }