Box

Column과 Row가 Linear레이아웃같은 컴포즈였다면

Box는 FrameLayout같은거라고 보면된다

Box는 contentAlignment = Alignment.TopEnd 얼라이먼트로 이렇게 그래비티 같은걸 정해줄수 있다.

리스트

Column 활용

저번에 Column같은 컴포즈를 알아봤는데, 이제 이걸 이용해서 리사이클러뷰 처럼 리스트들을 만들수 있다

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

for문을 사용해 크기가 50인 리스트를 만들었다.

굉장히 직관적이고 무슨 원리 인지 알기 쉬워보인다

val scrollState = rememberScrollState()를 이용해 스크롤 상태를 저장하고

Modifier에 verticalScroll(scrollState)를 설정해서 스크롤 가능한 형태로 만들 수 있다.

LazyColumn

그런데 우리가 리사이클러뷰를 사용하는 가장 큰 이유는 리스트의 재사용성 때문인데 위에 형식으로 하면 한번에 리스트를 전부 불러오게 된다

이때 LazyColumn을 이용하면 리사이클러뷰처럼 보이는 부분만 랜더링하고, 화면 밖으로 벗어난 항목들은 메모리에서 제거한다.

    LazyColumn(
        modifier = Modifier
            .background(Color.LightGray)
            .fillMaxWidth(),
        contentPadding = PaddingValues(16.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        item {
            Text(text = "Header")
        }
        items(50) {index ->
            Text(text = "글씨 $index")
        }

        item {
            Text(text = "Footer")
        }
    }

이때는 for문을 쓸순없고 items라는걸 쓰는데 딱 봐도 어떻게 사용하는건지 감이 온다.

리스트들의 간격을 벌려주기 위해 Arrangement.spacedBy(8.dp)를 설정해 줬다.

리사이클러뷰를 설정하기위해선 여러 복잡한 과정이 필요한데 간단하게 구현이 됬다.