Ustawianie właściwości kontenera

Możesz zdefiniować konfigurację kontenera siatki, aby tworzyć elastyczne układy, które reagują na różne rozmiary ekranu i typy treści. Z tej strony dowiesz się, jak wykonać te czynności:

• Zdefiniuj siatkę: skonfiguruj podstawową strukturę wierszy i kolumn.
• Umieść elementy w siatce: dowiedz się, jak elementy są umieszczane w komórkach siatki i jak zmienić kierunek przepływu.
• Zarządzaj rozmiarami ścieżek: używaj stałych, procentowych, elastycznych i wewnętrznych rozmiarów, aby ustawić rozmiary ścieżek.
• Ustaw odstępy: zarządzaj „marginesami” między wierszami i kolumnami.

Definiowanie siatki

Siatka składa się z kolumn i wierszy. Element Grid composable ma parametr config który akceptuje lambdę do definiowania kolumn i wierszy w GridConfigurationScope. Ten przykład definiuje siatkę, która ma 3 wiersze i 2 kolumny, a każda z nich 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 w lambdzie content i umieszcza je w komórkach siatki. Siatka układa elementy niezależnie od tego, czy wiersze i kolumny zostały zdefiniowane w sposób jawny. Domyślnie Grid próbuje umieścić element interfejsu w dostępnej komórce siatki w wierszu. Jeśli nie jest to możliwe, umieszcza go w dostępnej komórce siatki w następnym wierszu. Jeśli nie ma pustych komórek, Grid tworzy nowy wiersz.

W tym przykładzie siatka ma 6 komórek i w każdej z nich umieszczona jest 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

Aby zmienić to domyślne zachowanie 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

Zarządzanie rozmiarami ścieżek

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)).
• Procentowy (Float): przydziela procent całkowitej dostępnej przestrzeni od 0.0f do 1.0f (np. row(0.5f) dla 50%).
• Elastyczny (Fr): proporcjonalnie rozdziela pozostałą przestrzeń po obliczeniu ścieżek stałych i procentowych. Jeśli na przykład 2 wiersze są ustawione na 1.fr i 3.fr, ten drugi otrzyma 75% pozostałej wysokości.
• Wewnętrzny: określa rozmiar ścieżki na podstawie jej zawartości. Więcej informacji znajdziesz w artykule Określanie rozmiaru ścieżki siatki w sposób wewnętrzny.

Ten przykład używa różnych opcji rozmiaru ścieżki do zdefiniowania wysokości wierszy:

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)")
        PastelGreenCard("Percentage(0.2f)")
    PastelBlueCard("Flex(1.fr)")
        PastelYellowCard("Auto")

}
GridTrackSize.kt

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

Możesz użyć rozmiaru wewnętrznego w przypadku Grid gdy chcesz, aby układ dostosowywał się do treści, a nie wymuszał jej umieszczenia w kontenerze o stałym rozmiarze. 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 tekstowym).
• GridTrackSize.Auto: użyj elastycznego rozmiaru ścieżki, który dostosowuje się do dostępnej przestrzeni. Domyślnie zachowuje się jak MaxContent, ale zmniejsza i zawija treść, aby zmieściła się w kontenerze nadrzędnym.

Ten przykład umieszcza 2 teksty 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 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

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

Po określeniu rozmiaru ścieżek siatki, możesz zmodyfikować odstęp siatki, aby dopracować odstępy między ścieżkami. Odstęp między kolumnami możesz określić za pomocą funkcji columnGap, a odstęp między wierszami za pomocą funkcji rowGap. W tym przykładzie między każdym wierszem jest odstęp 16dp, a między każdą kolumną – 8dp (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

Możesz też użyć funkcji pomocniczej gap aby zdefiniować odstępy o tym samym rozmiarze kolumny i wiersza, oraz aby zdefiniować rozmiary kolumn i odstępów osobno za pomocą jednej funkcji. Ten 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