[Kotlin] 코틀린 JetPack Compose - Row

Text와 같은 UI요소들을 그냥 적용하면 요소들끼리 겹치고, 배치를 맞추기 힘듦

Row, Column, Box 등으로 레이아웃을 지정할 수 있음

UI요소들을 레이아웃 안에 넣어 사용

@Composable
fun TestView(){
    Column() {
        text1()
        text2()
    }
}

 

Row

화면에 수평으로 배치하기 위한 레이아웃

4개의 매개변수를 가짐 (각각 기본값이 존재)

 

1. modifier : Modifier = Modifier

[Kotlin] 코틀린 Compose Modifier

 

2. horizontalArrangement : Arrangement.Horizontal = Arrangement.Start

수평배치를 설정

Start : 읽는 방향에 정렬 (기본적으로 왼쪽 정렬, 기본값)

Center : 중앙 정렬

End : 마지막에 정렬 (기본적으로 오른쪽 정렬)

SpaceBetween : 화면 양 끝에 컴포넌트를 붙이고 간격을 똑같이

SpaceArround : 컴포넌트들 간의 간격이 동일하고 양쪽끝은 간격의 절반만큼 떨어져있음

SpaceEvenly : 간격과 양쪽 끝의 빈공간이 동일

 

3. verticalAlignment : Alignment.Vertical = Alignment.Top

수직정렬을 설정

Top : 위쪽 정렬 (기본값)

CenterVertically : 중앙정렬

Bottom : 아래 정렬

 

4. content : @Composable RowScope.() -> Unit

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

 

 Row(
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp),
    horizontalArrangement = Arrangement.SpaceBetween,
    verticalAlignment = Alignment.CenterVertically
) {
    Text("첫 번째 텍스트")
    Text("두 번째 텍스트")
    Text("세 번째 텍스트")
}