항목 동작 설정

Modifier.flex를 사용하여 FlexBox 내에서 항목의 크기, 순서, 정렬 방식을 제어합니다.

상품 사이즈

basis, grow 및 shrink 속성을 사용하여 항목의 크기를 제어합니다.

FlexBox {
    RedRoundedBox(
        modifier = Modifier.flex {
            basis = FlexBasis.Auto
            grow = 1.0f
            shrink = 0.5f
        }
    )
}
FlexBoxSnippets.kt

초기 크기 설정

basis를 사용하여 추가 공간이 분배되기 전 항목의 초기 크기를 지정합니다. 이를 상품의 기본 크기로 생각하면 됩니다.

값 유형	동작	코드 스니펫 참고: 상자의 최대 내장 크기는 100dp입니다.	컨테이너 너비 600dp를 사용하는 예
Auto (기본)	항목의 최대 고유 크기를 사용합니다. 예를 들어 Text 컴포저블의 최대 내재적 너비는 한 줄에 있는 모든 텍스트의 너비입니다(줄바꿈 없음).	FlexBox { RedRoundedBox( Modifier.flex { basis = FlexBasis.Auto } ) BlueRoundedBox( Modifier.flex { basis = FlexBasis.Auto } ) } FlexBoxSnippets.kt
dp를 수정했습니다.	Dp의 고정 크기입니다.	FlexBox { RedRoundedBox( Modifier.flex { basis(200.dp) } ) BlueRoundedBox( Modifier.flex { basis(100.dp) } ) } FlexBoxSnippets.kt
비율	컨테이너 크기의 백분율입니다.	FlexBox { RedRoundedBox( Modifier.flex { basis(0.7f) } ) BlueRoundedBox( Modifier.flex { basis(0.3f) } ) } FlexBoxSnippets.kt

기준 값이 항목의 내재된 최소 크기보다 작으면 내재된 최소 크기가 대신 사용됩니다. 예를 들어 단어가 포함된 Text 항목에 50dp가 표시되어야 하지만 basis = 10.dp도 있는 경우 50dp 값이 사용됩니다.

공간이 있을 때 항목 확장

grow를 사용하여 여유 공간이 있을 때 항목이 얼마나 커지는지 지정합니다. 모든 항목의 basis 값을 합한 후 FlexBox 컨테이너에 남아 있는 공간입니다. grow 값은 지정된 하위 요소가 형제 요소에 비해 추가 공간을 얼마나 받는지 나타냅니다. 기본적으로 항목은 늘어나지 않습니다.

다음 예시에서는 하위 항목이 3개인 FlexBox를 보여줍니다. 각각의 기준값은 100dp입니다. 첫 번째 하위 요소의 grow 값이 양수입니다. grow 값이 있는 하위 요소가 하나만 있으므로 실제 값은 관련이 없습니다. 값이 양수이기만 하면 하위 요소가 모든 여유 공간을 받습니다.

이미지는 컨테이너 크기가 600dp일 때 FlexBox 동작을 보여줍니다.

FlexBox { RedRoundedBox( title = "400dp", modifier = Modifier.flex { grow = 1f } ) BlueRoundedBox(title = "100dp") GreenRoundedBox(title = "100dp") } FlexBoxSnippets.kt

각 하위 요소의 기준 값은 100dp입니다. 여유 공간이 300dp 있습니다. Child 1이 300dp만큼 커져 여유 공간을 채웁니다.

다음 예에서는 컨테이너 크기와 basis 크기가 동일합니다. 차이점은 각 하위 요소의 grow 값이 다르다는 것입니다.

FlexBox { RedRoundedBox( title = "150dp", modifier = Modifier.flex { grow = 1f } ) BlueRoundedBox( title = "200dp", modifier = Modifier.flex { grow = 2f } ) GreenRoundedBox( title = "250dp", modifier = Modifier.flex { grow = 3f } ) } FlexBoxSnippets.kt

각 하위 요소의 기준 값은 100dp입니다. 여유 공간이 300dp 있습니다. 총 증가 값은 6입니다. 자녀 1이 (1 / 6) * 300 = 50dp만큼 성장합니다. 자녀 2는 (2 / 6) * 300 = 100dp만큼 성장합니다. 자녀 3은 (3 / 6) * 300 = 150dp만큼 성장합니다.

공간이 부족하면 항목을 축소합니다.

shrink를 사용하여 FlexBox 컨테이너에 모든 항목을 위한 공간이 부족할 때 항목이 얼마나 축소되는지 지정합니다. shrink는 grow와 동일한 방식으로 작동하지만, 항목에 여유 공간을 분배하는 대신 항목에 공간 부족이 분배됩니다. shrink 값은 항목이 받는 공간 부족의 양, 즉 항목이 축소되는 양을 지정합니다. 기본적으로 항목의 shrink 값은 1f이며, 이는 항목이 동일하게 축소됨을 의미합니다.

다음 예시에서는 텍스트가 동일한 두 개의 Text 컴포저블을 보여줍니다. 첫 번째 하위 요소의 축소 값은 1f입니다. 즉, 공간 부족을 모두 흡수하도록 축소됩니다.

FlexBox {
    Text(
        "The quick brown fox",
        fontSize = 36.sp,
        modifier = Modifier
            .background(PastelRed)
            .flex { shrink = 1f }
    )
    Text(
        "The quick brown fox",
        fontSize = 36.sp,
        modifier = Modifier
            .background(PastelBlue)
            .flex { shrink = 0f }
    )
}
FlexBoxSnippets.kt

컨테이너 크기가 줄어들면 Child 1이 줄어듭니다.

컨테이너 크기	FlexBox UI
700dp
500dp
450dp

항목 정렬

alignSelf를 사용하여 항목이 교차 축에 정렬되는 방식을 제어합니다. 이렇게 하면 이 항목의 컨테이너에 대한 alignItems 속성이 재정의됩니다. FlexBox 컨테이너의 동작을 상속하는 Auto가 추가되어 가능한 값이 모두 동일합니다.

예를 들어 이 FlexBox에는 alignItems이 Start로 설정되어 있고 교차 축 정렬을 재정의하는 하위 요소가 5개 있습니다.

FlexBox(
    config = {
        alignItems = FlexAlignItems.Start
    }
) {
    RedRoundedBox()
    BlueRoundedBox(modifier = Modifier.flex { alignSelf = FlexAlignSelf.Center })
    GreenRoundedBox(modifier = Modifier.flex { alignSelf = FlexAlignSelf.End })
    PinkRoundedBox(modifier = Modifier.flex { alignSelf = FlexAlignSelf.Stretch })
    OrangeRoundedBox(modifier = Modifier.flex { alignSelf = FlexAlignSelf.Baseline })
}
FlexBoxSnippets.kt

상품 순서

기본적으로 FlexBox는 코드로 선언된 순서대로 항목을 배치합니다. order를 사용하여 이 동작을 재정의합니다.

order의 기본값은 0이며 FlexBox는 이 값을 기준으로 항목을 오름차순으로 정렬합니다. order 값이 동일한 항목은 선언된 순서대로 배치됩니다. 음수 및 양수 order 값을 사용하여 선언된 위치를 변경하지 않고 레이아웃의 시작 또는 끝으로 항목을 이동합니다.

다음 예시에서는 두 개의 하위 항목을 보여줍니다. 첫 번째는 기본값인 0의 order를 가지고 두 번째는 -1의 순서를 가집니다. 정렬 후 Child 1이 Child 2 뒤에 표시됩니다.

FlexBox {
    // Declared first, but will be placed after visually
    RedRoundedBox(
        title = "World"
    )

    // Declared second, but will be placed first visually
    BlueRoundedBox(
        title = "Hello",
        modifier = Modifier.flex {
            order = -1
        }
    )
}
FlexBoxSnippets.kt