Ustawianie właściwości elementu

Konfiguracja Grid określa ogólną strukturę, ale za pomocą modyfikatora gridItem możesz kontrolować pozycję, rozpiętość i wyrównanie elementów w tej strukturze.

Ustawianie pozycji elementu

Umieść element w określonej ścieżce lub komórce za pomocą parametrów row i column.

Parametry row i column określają indeksy ścieżek wierszy i kolumn, w których umieszczony jest element. Indeksy ścieżek są liczone od 1. Jeśli określisz tylko row lub column (nie oba), element zostanie umieszczony w następnym dostępnym miejscu w tej ścieżce. Jeśli określisz oba, element zostanie umieszczony w tej komórce.

Aby określić indeks ścieżki od początku, użyj dodatniej liczby całkowitej. Aby na przykład umieścić element w pierwszym wierszu i pierwszej kolumnie, użyj gridItem(row = 1, column = 1).

Aby określić ścieżkę względem końca, użyj ujemnej liczby całkowitej. Aby na przykład umieścić element w przedostatnim wierszu i przedostatniej kolumnie, użyj gridItem(row = -2, column = -2).

W tym przykładzie karta #2 jest umieszczona w drugim wierszu i drugiej kolumnie. Karta #3 jest przypisana do ostatniego wiersza (indeks -1), w którym automatycznie zajmuje pierwszą dostępną kolumnę w tej ścieżce (rysunek 1).

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp)
    }
) {
    Card1()
    Card2(modifier = Modifier.gridItem(row = 2, column = 2))
    Card3(modifier = Modifier.gridItem(row = -1, column = -2))
}
GridItem.kt

Rysunek 1. Karta #2 jest umieszczona w komórce siatki w drugim wierszu i drugiej kolumnie, a karta #3 – w pierwszej kolumnie w trzecim wierszu.

Rozpiętość wierszy i kolumn

Aby rozpiąć element na kilka komórek, użyj parametrów rowSpan i columnSpan. Możesz umieścić element interfejsu w obszarze siatki, czyli obszarze składającym się z kilku komórek siatki. Modyfikator gridItem umożliwia określenie obszaru siatki za pomocą parametrów rowSpan i columnSpan. W tym przykładzie karta #1 jest umieszczona w obszarze składającym się z 2 wierszy i 2 kolumn (rysunek 2).

Grid(
    config = {
        repeat(3) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(8.dp)
        columnGap(8.dp)
    }
) {
    Card1(modifier = Modifier.gridItem(rowSpan = 2, columnSpan = 2))
    Card2()
    Card3()
    Card4(modifier = Modifier.gridItem(columnSpan = 3))
}
GridArea.kt

Rysunek 2. Karta #4 obejmuje 3 kolumny.

Ustawianie wyrównania w obszarze siatki

Wyrównanie elementu interfejsu w obszarze siatki możesz ustawić, określając je w parametrze alignment modyfikatora gridItem. W tym przykładzie #1 jest umieszczony na środku obszaru siatki składającego się z 2 kolumn i 2 wierszy.

Grid(
    config = {
        repeat(3) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(8.dp)
        columnGap(8.dp)
    },
) {
    Text(
        text = "#1",
        modifier = Modifier
            .gridItem(
                rowSpan = 2,
                columnSpan = 2,
                alignment = Alignment.Center
            ),
    )
    Card2()
    Card3()
    Card4(modifier = Modifier.gridItem(columnSpan = 3))
}
GridArea.kt

Rysunek 3. Tekst z #1 jest umieszczony na środku obszaru siatki składającego się z 2 wierszy i 2 kolumn.

Automatyczne umieszczanie elementów w połączeniu z umieszczonymi elementami

Element interfejsu w Grid, który nie ma określonej pozycji, jest umieszczany automatycznie. Ten przykład pokazuje, jak można łączyć elementy umieszczane automatycznie z elementami interfejsu w określonych komórkach siatki. Karta #2 i karta #4 to określone komórki siatki, a pozostałe elementy są umieszczane automatycznie.

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(16.dp)
        columnGap(8.dp)
    }
) {
    Card1()
    Card2(modifier = Modifier.gridItem(row = 2, column = 2))
    Card3()
    Card4(modifier = Modifier.gridItem(row = 3, column = 1))
    Card5()
    Card6()
}
GridItem.kt

Rysunek 4. Karta #3 jest umieszczona obok karty #1, ponieważ jest umieszczana automatycznie.