Ustawianie działania elementu

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

Rozmiar produktu

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)
        }
    )
}

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 użycia 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) }
    )
}
 Rozmiar elementów jest określany na podstawie ich rozmiaru wewnętrznego przy użyciu automatycznej bazy.

Naprawiono: dp

Stały rozmiar w dp.

 
FlexBox {
    RedRoundedBox(
        Modifier.flex { basis(200.dp) }
    )
    BlueRoundedBox(
        Modifier.flex { basis(100.dp) }
    )
}
 Elementy o rozmiarze określonym za pomocą stałej wartości dp przy użyciu podstawy.

Procent

procent rozmiaru kontenera,

 
FlexBox {
    RedRoundedBox(
        Modifier.flex { basis(0.7f) }
    )
    BlueRoundedBox(
        Modifier.flex { basis(0.3f) }
    )
}
 Elementy o rozmiarze określonym jako procent rozmiaru kontenera przy użyciu bazy.

Jeśli wartość podstawowa 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.

Powiększaj elementy, gdy jest miejsce

Użyj właściwości grow, aby określić, o ile element ma się powiększyć, gdy jest dodatkowe miejsce. Jest to miejsce pozostałe w kontenerze FlexBox po zsumowaniu wszystkich wartości basis elementów. Wartość grow określa, jaką część dodatkowego miejsca otrzyma dany element podrzędny w porównaniu z innymi elementami podrzędnymi. Domyślnie elementy nie będą się powiększać.

Poniższy przykład pokazuje element FlexBox z 3 elementami podrzędnymi. Każdy ma wartość bazową 100dp. Pierwszy element podrzędny ma dodatnią wartość grow. Ponieważ jest tylko jedno dziecko z wartością grow, rzeczywista wartość nie ma znaczenia – jeśli jest dodatnia, dziecko otrzymuje całą dodatkową przestrzeń.

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

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

Każdy element podrzędny ma wartość podstawową 100dp. Masz 300dp dodatkowego miejsca.

Trzy elementy o bazie 100 dp każdy w kontenerze o szerokości 600 dp przed powiększeniem.

Element podrzędny 1 powiększa się o 300dp, aby wypełnić dodatkową przestrzeń.

Pierwszy element powiększa się, aby wypełnić 300 dp dodatkowego miejsca.

W przykładzie poniżej rozmiar kontenera i rozmiar basis są takie same. Różnica polega na tym, że każde dziecko 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) }
    )
}

Każdy element podrzędny ma wartość podstawową 100dp. Masz 300dp dodatkowego miejsca.

Trzy elementy o bazie 100 dp każdy w kontenerze o szerokości 600 dp przed powiększeniem, z różnymi wartościami powiększenia.

Łączna wartość wzrostu wynosi 6.

Child 1 zwiększa się o (1 / 6) * 300 = 50dp

Child 2 zwiększa się o (2 / 6) * 300 = 100dp

Dziecko 3 rośnie o (3 / 6) * 300 = 150dp

Elementy powiększają się, aby wypełnić 300 dp dodatkowego miejsca na podstawie względnych wartości powiększenia.

Zmniejszaj elementy, gdy jest za mało miejsca

Użyj shrink, aby określić, jak bardzo element ma się zmniejszyć, gdy w kontenerze FlexBox nie ma wystarczającej ilości miejsca na wszystkie elementy. Właściwość shrink działa tak samo jak grow, z tą różnicą, że zamiast rozdzielać dodatkowe miejsce między elementy, rozdziela między nie brakujące miejsce. Wartość shrink określa, jaka część deficytu miejsca zostanie przypisana do elementu, czyli o ile element się zmniejszy. Domyślnie elementy mają wartość shrink równą 1f, co oznacza, że zmniejszają się w jednakowym stopniu.

Poniższy przykład pokazuje 2 komponenty 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) }
    )
}

Gdy rozmiar kontenera się zmniejsza, zmniejsza się też element podrzędny 1.

Rozmiar kontenera

Interfejs FlexBox

700dp

 Dwa elementy w kontenerze o szerokości 700 dp.

500dp

 Pierwszy element zmniejsza się, gdy rozmiar kontenera zmniejsza się do 500 dp.

450dp

 Pierwszy element zmniejsza się jeszcze bardziej, gdy rozmiar kontenera zmniejsza się do 450 dp.

Wyrównanie elementów

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

Na przykład ten element FlexBox ma właściwość alignItems ustawioną 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) })
}

Pięć elementów podrzędnych o różnych rozmiarach, które zastępują właściwość alignItems.

Kolejność elementów

Domyślnie FlexBox układa elementy w kolejności, w jakiej są zadeklarowane w kodzie. Zastąp to działanie za pomocą order.

Domyślna wartość order to 0, a FlexBox sortuje elementy na podstawie tej wartości w porządku rosnącym. Wszystkie elementy o tej samej wartości order są rozmieszczane w 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 pokazuje 2 elementy podrzędne. Pierwszy ma domyślną kolejność order, czyli zero, a drugi – -1. Po posortowaniu dziecko 1 pojawia 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)
        }
    )
}

Dwa zaokrąglone pola, z których pierwsze zawiera tekst „Hello”, a drugie – „World”.