Compose 기초 - Box, 리스트(Column, LazyColumn)

• Box
  겹치는게 허용되는 FrameLayout 성격을 갖고 있음
  

@Composable
fun MatchParentSizeComposable() {
    Box {
        Spacer(Modifier.matchParentSize().background(Color.LightGray))
        ArtistCard()
    }
}

• 리스트
  일반적인 Column으로 구현
  아이템 수가 딱 정해져 있고 미리 띄우는게 이득일때 사용하기
  

Column( //아이템들을 한번에 다 만들어놓은 느낌
    modifier = Modifier
    .background(color = Color.Blue)
    .fillMaxWidth()
    .verticalScroll(scrollState)
) {
    for (i in 1. .50) {
        Text(text = "글씨 $i")
    }
}

• LazyColumn으로 구현
  많은 수의 항목이나 길이를 알 수 없는 목록을 표시해야 하는 경우 Column과 같은 레이아웃을 사용하게 되면 모두 표시하게 되고 이때 성능문제가 일어날 수 있기에 LazyColumn을 사용하는게 좋다.

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

틀린 부분 지적은 언제나 환영해요🤗