Ustawianie właściwości elementu

Konfiguracja Grid określa ogólną strukturę, ale do kontrolowania pozycji, rozpiętości i wyrównania elementów w tej strukturze służy modyfikator gridItem.

Ustawianie pozycji elementu

Umieść element w konkretnej ścieżce lub komórce za pomocą parametrów row i column. Indeksy współrzędnych najlepiej sprawdzają się w przypadku prostych układów siatki. W przypadku większych lub bardziej złożonych układów zdefiniuj nazwane obszary.

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 (ale nie obie te wartości), element zostanie umieszczony w następnym dostępnym miejscu na tej ścieżce. Określenie obu tych wartości powoduje umieszczenie elementu w tej komórce.

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

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

W poniższym przykładzie karta #2 jest umieszczona w drugim wierszu i drugiej kolumnie. Karta 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 przykładzie poniżej 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

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 połączone z umieszczonymi elementami

Element interfejsu w aplikacji Grid, który nie ma określonej pozycji, jest umieszczany automatycznie. Ten przykład pokazuje, jak można łączyć elementy umieszczane automatycznie i elementy interfejsu z określonymi komórkami siatki. Karta 2 i karta 4 są umieszczone w określonych komórkach siatki, a pozostałe elementy są rozmieszczone 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