Ustawianie działania elementu

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

Rozmiar produktu

Użyj właściwości basis, grow i shrink, aby kontrolować rozmiar elementu.

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 rozprowadzeniem dodatkowej przestrzeni. Można to traktować jako preferowany rozmiar produktu.

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ślna)	Użyj maksymalnego rozmiaru wewnętrznego elementu. Na przykład maksymalna wewnętrzna szerokość komponentu 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 pikselach niezależnych od gęstości.	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ść podstawowa jest mniejsza niż minimalny rozmiar elementu, zamiast niej używany jest minimalny rozmiar. Jeśli na przykład Text element zawierający słowo50dp wymaga wyświetlenia, ale ma też basis = 10.dp, używana jest wartość 50dp.

Powiększanie elementów, gdy jest miejsce

Użyj grow, aby określić, o ile element powiększa się, gdy jest więcej miejsca. Jest to miejsce pozostałe w kontenerze FlexBox po dodaniu wszystkich wartości basis elementów. Wartość grow wskazuje, ile dodatkowego miejsca otrzyma dane dziecko w porównaniu z rodzeństwem. Domyślnie elementy nie będą się powiększać.

Poniższy przykład przedstawia element FlexBox z 3 elementami podrzędnymi. Każdy z nich ma wartość bazową 100dp. Pierwsze dziecko ma dodatnią wartość grow. Ponieważ jest tylko 1 element podrzędny z wartością grow, rzeczywista wartość nie ma znaczenia – dopóki jest dodatnia, element podrzędny otrzymuje całą dodatkową przestrzeń.

Obrazy pokazują działanie elementu FlexBox, gdy rozmiar kontenera wynosi 600dp.

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

Każde dziecko ma wartość podstawową 100dp. Jest 300dp dodatkowego miejsca. Element 1 dziecka powiększa się o 300dp, aby wypełnić dodatkową przestrzeń.

W tym przykładzie rozmiar kontenera i basis są takie same. Różnica polega na tym, że każde dziecko ma inną growwartość.

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żde dziecko ma wartość podstawową 100dp. Jest 300dp dodatkowego miejsca. Łączna wartość wzrostu wynosi 6. Wzrost dziecka 1 wynosi (1 / 6) * 300 = 50dp Dziecko 2 rośnie o (2 / 6) * 300 = 100dp Dziecko 3 rośnie o (3 / 6) * 300 = 150dp

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

Użyj atrybutu shrink, aby określić, o ile zmniejszy się element, gdy kontener FlexBox nie będzie miał wystarczająco dużo miejsca na wszystkie elementy. shrink działa tak samo jak grow, z tym że zamiast rozdzielać dodatkową przestrzeń między elementy, rozdziela między nie niedobór miejsca. Wartość shrink określa, ile miejsca otrzyma produkt, 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 pokazuje 2 funkcje kompozycyjne Text z tym samym tekstem. Pierwszy element podrzędny ma wartość zmniejszania 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

W miarę zmniejszania się rozmiaru kontenera zmniejsza się też rozmiar elementu Child 1.

Rozmiar kontenera	Interfejs FlexBox
700dp
500dp
450dp

Wyrównanie elementu

Użyj alignSelf, aby określić, jak element jest wyrównany względem osi poprzecznej. Zastępuje to alignItems właściwość kontenera dla tego produktu. Ma wszystkie te same możliwe wartości, a dodatkowo wartość Auto, która dziedziczy zachowanie kontenera FlexBox.

Na przykład ten element FlexBox ma ustawioną wartość alignItems na Start i 5 elementów podrzędnych, które zastępują wyrównanie wzdłuż 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ść produktów

Domyślnie FlexBox rozmieszcza elementy w kolejności, w jakiej są zadeklarowane w kodzie. Zastąp to działanie za pomocą 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 wartości ujemnych i dodatnichorder, aby przenieść elementy na początek lub koniec układu bez zmiany miejsca ich deklaracji.

Poniższy przykład pokazuje 2 elementy podrzędne. Pierwsza ma domyślną wartość order – zero, a druga ma wartość -1. Po posortowaniu Dziecko 1 pojawi się po Dziecku 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