[Kotlin] 코틀린 JetPack Compose - Box

[Kotlin] 코틀린 JetPack Compose - Column

 

Box

여러 UI요소들을 겹쳐서 놓을 수 있는 레이아웃

아래 버튼을 만들거나 할때 유용

요소가 겹칠때 기본적으로 Box안에서 아래로 있을수록 화면 위로 올라옴

 

Box의 매개변수

1. modifier: Modifier = Modifier

[Kotlin] 코틀린 JetPack Compose Modifier

 

2. contentAlignment: Alignment = Alignment.TopStart

자식의 기본 정렬 방식을 결정

	왼쪽	가운데	오른쪽
위	TopStart	TopCenter	TopEnd
가운데	CenterStart	Center	CenterEnd
아래	BottomStart	BottomCenter	BottomEnd

Box보다 Box 내부의 자식 위젯 Modifier의 align이 우선순위가 더 높음

 

3. propagateMinConstraints: Boolean = false

자식의 최소 크기 제한을 이용할지 결정

Box(
    modifier = Modifier.size(50.dp),
    propagateMinConstraints = false
) {
    Text(
        "Hello",
        modifier = Modifier.requiredMinSize(100.dp)
    )
}

위의 코드처럼 false의 경우, 자식의 최소크기 제약을 무시하고 50dp로 표현함 -> 요소가 잘릴 수 있음

만약 true로 설정하면 자식의 최소크기 제약을 따르기 때문에 100dp로 표시

 

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