Ustawianie właściwości kontenera

Możesz zdefiniować konfigurację kontenera siatki, aby tworzyć elastyczne układy, które dostosowują się do różnych rozmiarów ekranu i rodzajów treści. Na tej stronie dowiesz się, jak:

• Zdefiniuj siatkę: skonfiguruj podstawową strukturę wierszy i kolumn.
• Umieszczanie elementów w siatce: dowiedz się, jak elementy są umieszczane w komórkach siatki i jak zmienić kierunek przepływu.
• Zarządzanie rozmiarem ścieżki: używaj stałych, ułamkowych, elastycznych i wewnętrznych rozmiarów, aby ustawiać rozmiary ścieżek.
• Ustawianie odstępów: zarządzaj odstępami między wierszami i kolumnami.

Określanie siatki

Siatka składa się z kolumn i wierszy. Kompozycja Grid ma parametr config, który akceptuje funkcję lambda do definiowania kolumn i wierszy w GridConfigurationScope. Poniższy przykład definiuje siatkę z 3 wierszami i 2 kolumnami, z których każda ma stały rozmiar określony w Dp:

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
}
DefineGrid.kt

Umieszczanie elementów w siatce

Grid pobiera elementy interfejsu z funkcji lambda content i umieszcza je w komórkach siatki. Siatka rozmieszcza elementy niezależnie od tego, czy wiersze i kolumny zostały zdefiniowane. Domyślnie funkcja Grid próbuje umieścić element interfejsu w dostępnej komórce siatki w wierszu. Jeśli to się nie uda, umieszcza go w dostępnej komórce siatki w następnym wierszu. Jeśli nie ma pustych komórek, Grid utworzy nowy wiersz.

W poniższym przykładzie siatka ma 6 komórek, a w każdej z nich znajduje się karta (rysunek 1). Każda komórka siatki ma wymiary 160dp x 90dp, co daje łączny rozmiar siatki 320dp x 270dp.

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
DefineGrid.kt

Rysunek 1. Sześć kart jest umieszczonych w siatce z 3 wierszami i 2 kolumnami.

Aby zmienić to domyślne działanie na wypełnianie według kolumny, ustaw właściwość flow na GridFlow.Column.

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp)
        flow = GridFlow.Column // Grid tries to place items to fill the column
    },
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridItem.kt

Rysunek 2. GridFlow.Row (lewa) i GridFlow.Column (prawa).

Zarządzanie rozmiarem ścieżki

Wiersze i kolumny są łącznie nazywane ścieżką siatki. Rozmiar ścieżki siatki możesz określić na jeden z tych sposobów:

• Stały (Dp): przydziela określony rozmiar (np. column(180.dp)).
• Ułamkowy (Float): przydziela procent całkowitej dostępnej przestrzeni od 0.0f do 1.0f (np. row(0.5f) dla 50%).
• Elastyczny (Fr): rozdziela pozostałą przestrzeń proporcjonalnie po obliczeniu ścieżek stałych i ułamkowych. Jeśli na przykład 2 wiersze mają wartości 1.fr i 3.fr, ten drugi zajmuje 75% pozostałej wysokości.
• Wewnętrzna: rozmiar ścieżki jest dostosowywany do zawartości. Więcej informacji znajdziesz w artykule Określanie rozmiaru ścieżki siatki w sposób wewnętrzny.

W przykładzie poniżej do zdefiniowania wysokości wierszy użyto różnych opcji określania rozmiaru ścieżki:

Grid(
    config = {
        column(1f)

        row(100.dp)
        row(0.2f)
        row(1.fr)
        row(GridTrackSize.Auto)
    },
    modifier = Modifier.height(480.dp)
) {
    PastelRedCard("Fixed(100.dp)")
GridTrackSize.kt

Rysunek 3. Wysokości wierszy zdefiniowane za pomocą 4 podstawowych opcji określania rozmiaru ścieżki w Grid.

Określanie rozmiaru ścieżki siatki w sposób wewnętrzny

Możesz użyć rozmiaru wewnętrznego w przypadku elementu Grid, gdy chcesz, aby układ dostosowywał się do treści, a nie był wymuszany w stałym kontenerze. Rozmiar ścieżki siatki jest określany na podstawie tych wartości:

• GridTrackSize.MaxContent: użyj maksymalnego rozmiaru wewnętrznego treści (np. szerokość jest określana przez pełną długość tekstu w bloku tekstowym bez zawijania).
• GridTrackSize.MinContent: użyj minimalnego rozmiaru wewnętrznego treści (np. szerokość jest określana przez najdłuższe pojedyncze słowo w bloku tekstu).
• GridTrackSize.Auto: użyj elastycznego rozmiaru ścieżki, który dostosowuje się do dostępnego miejsca. Domyślnie działa jak MaxContent, ale zmniejsza i zawija zawartość, aby dopasować ją do kontenera nadrzędnego.

W tym przykładzie 2 teksty są umieszczone obok siebie. Rozmiar kolumny pierwszego tekstu jest określany przez minimalną szerokość wymaganą do wyświetlenia tekstu, a szerokość drugiej kolumny zależy od maksymalnej szerokości wymaganej do wyświetlenia tekstu.

Grid(
    config = {
        column(GridTrackSize.MinContent)
        column(GridTrackSize.MaxContent)
        row(1.0f)
    },
    modifier = Modifier.width(480.dp)
) {
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet." )
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet." )
}
GridTrackSize.kt

Rysunek 4. Rozmiary wewnętrzne określone w kolumnach.

Ustawianie odstępów między wierszami i kolumnami

Po określeniu rozmiaru ścieżek siatki możesz zmodyfikować odstęp między ścieżkami, aby dostosować odstępy między nimi. Odstęp między kolumnami możesz określić za pomocą funkcji columnGap, a odstęp między wierszami za pomocą funkcji rowGap. W przykładzie poniżej między wierszami jest 16dp odstęp, a między kolumnami jest 8dp odstęp (rysunek 5).

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(16.dp)
        columnGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridGap.kt

Rysunek 5. odstępy między wierszami i kolumnami,

Możesz też użyć funkcji gap, aby zdefiniować odstępy o takim samym rozmiarze kolumny i wiersza oraz zdefiniować rozmiary kolumn i odstępów oddzielnie za pomocą jednej funkcji. Poniższy kod dodaje do siatki odstępy 8dp:

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp) // Equivalent to columnGap(8.dp) and rowGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridGap.kt