Ustawianie działania elementu

Użyj Modifier.flex, aby kontrolować, jak element zmienia rozmiar, kolejność i wyrównanie w FlexBox.

Rozmiar elementu

Aby kontrolować rozmiar elementu, użyj funkcji basis, grow i shrink.

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

Ustawianie rozmiaru początkowego

Użyj basis, aby określić początkowy rozmiar elementu przed rozdzieleniem dodatkowego miejsca. Możesz to traktować jako preferowany rozmiar elementu.

Typ wartości	Zachowanie	Fragment kodu Uwaga: maksymalny rozmiar wewnętrzny pól to 100dp.	Przykład z użyciem szerokości kontenera 600dp
Auto (domyślnie)	Użyj maksymalnego rozmiaru wewnętrznego elementu. Na przykład maksymalna szerokość wewnętrzna elementu kompozycyjnego Text to szerokość całego tekstu w jednym wierszu – bez zawijania.	FlexBox { RedRoundedBox( Modifier.flex { basis(FlexBasis.Auto) } ) BlueRoundedBox( Modifier.flex { basis(FlexBasis.Auto) } ) } FlexBoxSnippets.kt
Stała dp	Stały rozmiar w dp.	FlexBox { RedRoundedBox( Modifier.flex { basis(200.dp) } ) BlueRoundedBox( Modifier.flex { basis(100.dp) } ) } FlexBoxSnippets.kt
Procent	Procent rozmiaru kontenera.	FlexBox { RedRoundedBox( Modifier.flex { basis(0.7f) } ) BlueRoundedBox( Modifier.flex { basis(0.3f) } ) } FlexBoxSnippets.kt

Jeśli wartość basis jest mniejsza niż minimalny rozmiar wewnętrzny elementu, używany jest minimalny rozmiar wewnętrzny. Jeśli na przykład element Text zawierający słowo wymaga do wyświetlenia 50dp, ale ma też basis = 10.dp, używana jest wartość 50dp.

Zwiększanie rozmiaru elementów, gdy jest miejsce

Użyj grow, aby określić, o ile element ma się powiększyć, gdy jest dodatkowe miejsce. Jest to miejsce pozostałe w kontenerze FlexBox po dodaniu wszystkich wartości basis elementów. Wartość grow wskazuje, ile dodatkowego miejsca otrzyma dany element podrzędny w stosunku do swoich elementów równorzędnych. Domyślnie rozmiar elementów nie będzie się zwiększał.

Poniższy przykład przedstawia FlexBox z 3 elementami podrzędnymi. Każdy z nich ma wartość basis równą 100dp. Pierwszy element podrzędny ma dodatnią wartość grow. Ponieważ tylko 1 element podrzędny ma wartość grow, rzeczywista wartość nie ma znaczenia – o ile jest dodatnia, element podrzędny otrzymuje całe dodatkowe miejsce.

Obrazy pokazują zachowanie FlexBox, gdy rozmiar kontenera wynosi 600dp.

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

Każdy element podrzędny ma wartość basis równą 100dp. Jest 300dp dodatkowego miejsca. Rozmiar elementu podrzędnego 1 zwiększa się o 300dp, aby wypełnić dodatkowe miejsce.

W poniższym przykładzie rozmiar kontenera i rozmiar basis są takie same. Różnica polega na tym, że każdy element podrzędny ma inną wartość 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

Każdy element podrzędny ma wartość basis równą 100dp. Jest 300dp dodatkowego miejsca. Łączna wartość grow wynosi 6. Rozmiar elementu podrzędnego 1 zwiększa się o (1 / 6) * 300 = 50dp. Rozmiar elementu podrzędnego 2 zwiększa się o (2 / 6) * 300 = 100dp. Rozmiar elementu podrzędnego 3 zwiększa się o (3 / 6) * 300 = 150dp.

Zmniejszanie rozmiaru elementów, gdy jest za mało miejsca

Użyj shrink, aby określić, o ile element ma się zmniejszyć, gdy kontener FlexBox ma za mało miejsca na wszystkie elementy. shrink działa tak samo jak grow, z tym że zamiast rozdzielać dodatkowe miejsce między elementy, rozdziela między nie deficyt miejsca. Wartość shrink określa, ile deficytu miejsca otrzyma element, a raczej o ile się zmniejszy. Domyślnie elementy mają wartość shrink równą 1f, co oznacza, że zmniejszają się w równym stopniu.

Poniższy przykład przedstawia 2 elementy kompozycyjne Text z tym samym tekstem. Pierwszy element podrzędny ma wartość shrink równą 1f, co oznacza, że zmniejsza się, aby wchłonąć cały deficyt miejsca.

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

Wraz ze zmniejszaniem się rozmiaru kontenera zmniejsza się rozmiar elementu podrzędnego 1.

Rozmiar kontenera	Interfejs FlexBox
700dp
500dp
450dp

Wyrównanie elementu

Użyj alignSelf, aby kontrolować, jak element jest wyrównywany do osi poprzecznej. Zastępuje to właściwość alignItems kontenera w przypadku tego elementu. Ma te same możliwe wartości, a dodatkowo wartość Auto, która dziedziczy zachowanie kontenera FlexBox.

Na przykład ten FlexBox ma ustawioną wartość alignItems na Start i 5 elementów podrzędnych, które zastępują wyrównanie osi poprzecznej.

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

Kolejność elementów

Domyślnie FlexBox rozmieszcza elementy w kolejności, w jakiej są zadeklarowane w kodzie. Aby zastąpić to zachowanie, użyj order.

Domyślna wartość order to zero, a FlexBox sortuje elementy na podstawie tej wartości w kolejności rosnącej. Wszystkie elementy, które mają tę samą wartość order, są rozmieszczane w tej samej kolejności, w jakiej zostały zadeklarowane. Użyj ujemnych i dodatnich wartości order, aby przenieść elementy na początek lub koniec układu bez zmiany miejsca ich deklaracji.

Poniższy przykład przedstawia 2 elementy podrzędne. Pierwszy ma domyślną wartość order równą zero, a drugi ma wartość order równą -1. Po posortowaniu element podrzędny 1 pojawia się po elemencie podrzędnym 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