[Kotlin] 코틀린 JetPack Compose - Column

[Kotlin] 코틀린 Compose - Row

 

Column

화면에 UI요소들을 수직으로 배치하기 위한 레이아웃

Row와 마찬가지로 4개의 매개변수를 가지고, 각각 기본값이 있음

 

1. modifier: Modifier = Modifier

[Kotlin] 코틀린 Compose Modifier

 

2. verticalArrangement: Arrangement.Vertical = Arrangement.Top,

수직 배치를 설정

Top : 위쪽 정렬 (기본값)

Center : 중앙 정렬

Bottom : 아래 정렬

SpaceBetween : 컴포넌트 간의 간격이 같고, 양 끝의 여백이 없음

SpaceAround : 컴포넌트 간의 간격이 같고, 양 끝의 여백은 간격의 절반

SpaceEvenly : 컴포넌트 간의 간격이 같고, 양 끝의 여백도 간격과 같음

 

3. horizontalAlignment: Alignment.Horizontal = Alignment.Start,

수평 정렬을 설정

Start : 왼쪽 정렬 (기본값)

CenterHorizontally : 중앙 정렬

End : 오른쪽 정렬

 

 

content: @Composable ColumnScope.() -> Unit

레이아웃에 들어가는 요소들이 해당됨

Column(
    modifier = Modifier
    .fillMaxWidth()
    .fillMaxHeight(),
    verticalArrangement = Arrangement.SpaceEvenly
) {
    Text(text = "첫번째")
    Text(text = "두번째")
    Text(text = "세번째")
}