항목 동작 설정

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 값은 지정된 하위 요소가 형제 요소에 비해 추가 공간을 얼마나 받게 되는지를 나타냅니다. 기본적으로 항목은 확장되지 않습니다.

다음 예는 하위 항목이 세 개 있는 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의 추가 공간이 있습니다.

하위 요소 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의 추가 공간이 있습니다.

성장 전, 600dp 컨테이너에 각각 100dp를 기준으로 하는 세 개의 항목이 있으며 성장 값은 다릅니다.

총 grow 값은 6입니다.

하위 요소 1은 (1 / 6) * 300 = 50dp만큼 확장됩니다.

하위 요소 2는 (2 / 6) * 300 = 100dp만큼 확장됩니다.

하위 요소 3은 (3 / 6) * 300 = 150dp만큼 확장됩니다.

상품은 상대적 증가 값을 기반으로 300dp의 추가 공간을 채우도록 증가합니다.

공간이 부족한 경우 항목 축소

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

다음 예는 동일한 텍스트가 있는 두 개의 Text 컴포저블을 보여줍니다. 첫 번째 하위 요소의 shrink 값은 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

컨테이너 크기가 축소되면 하위 요소 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

alignItems 속성을 재정의하는 다양한 크기의 자녀 5명

항목 순서

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

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

다음 예는 두 개의 하위 항목을 보여줍니다. 첫 번째 항목의 기본 order는 0이고 두 번째 항목의 순서는 -1입니다. 정렬 후 하위 요소 1이 하위 요소 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

둥근 상자 두 개가 있으며 첫 번째 상자에는 Hello라는 텍스트가 포함되어 있고 두 번째 상자에는 World라는 텍스트가 포함되어 있습니다.

컨테이너 동작 설정

개요

항목 동작 설정 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.