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.

Ustaw pozycję produktu

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. Określenie tylko row lub column (nie obu) powoduje umieszczenie elementu w następnym dostępnym miejscu na ścieżce. Określenie obu tych wartości spowoduje umieszczenie elementu 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 wartości gridItem(row = 1, column = 1).

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

W poniższym przykładzie karta nr 2 jest umieszczona w drugim wierszu i drugiej kolumnie. Karta nr 3 jest przypisana do ostatniego wiersza (indeks -1), gdzie automatycznie zajmuje pierwszą dostępną kolumnę na 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

Rozciąganie wierszy i kolumn

Użyj parametrów rowSpan i columnSpan, aby rozciągnąć element na kilka komórek. Element interfejsu możesz umieścić w obszarze siatki, który składa się z kilku komórek siatki. Modyfikator gridItem umożliwia określenie obszaru siatki za pomocą parametrów rowSpan i columnSpan. W poniższym przykładzie karta nr 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

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 poniższym przykładzie element #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

Automatyczne umieszczanie 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ć automatycznie umieszczane elementy z elementami interfejsu z określonymi komórkami siatki. Karty 2 i 4 znajdują się w określonych komórkach 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