Elementattribute festlegen

Die Grid-Konfiguration definiert die Gesamtstruktur. Mit dem Modifikator gridItem können Sie die Position, die Spanne und die Ausrichtung von Elementen in dieser Struktur steuern.

Position des Elements festlegen

Mit den Parametern row und column können Sie ein Element in einem bestimmten Track oder einer bestimmten Zelle platzieren.

Mit den Parametern row und column werden die Zeilen- und Spaltenindexe des Tracks angegeben, in dem das Element platziert wird. Trackindexe sind 1-basiert, d. h., sie beginnen bei 1. Wenn Sie nur row oder column (nicht beides) angeben, wird das Element im nächsten verfügbaren Bereich in diesem Track platziert. Wenn Sie beides angeben, wird das Element in dieser Zelle platziert.

Geben Sie eine positive Ganzzahl an, um den Trackindex ab dem Start festzulegen. Wenn Sie ein Element beispielsweise in der ersten Zeile und Spalte platzieren möchten, verwenden Sie gridItem(row = 1, column = 1).

Verwenden Sie eine negative Ganzzahl, um den Track relativ zum Ende anzugeben. Wenn Sie beispielsweise ein Element in der vorletzten Zeile und Spalte platzieren möchten, verwenden Sie gridItem(row = -2, column = -2).

Im folgenden Beispiel wird Karte #2 in der zweiten Zeile und der zweiten Spalte platziert. Karte #3 wird der letzten Zeile zugewiesen (Index -1). Dort belegt sie automatisch die erste verfügbare Spalte in diesem Track (Abbildung 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

Zeilen und Spalten zusammenfassen

Mit den Parametern rowSpan und columnSpan können Sie ein Element über mehrere Zellen hinweg platzieren. Sie können ein UI-Element in einem Rasterbereich platzieren, der aus mehreren Rasterzellen besteht. Mit dem Modifikator gridItem können Sie den Rasterbereich mit den Parametern rowSpan und columnSpan angeben. Im folgenden Beispiel wird die Karte #1 in dem Bereich platziert, der aus zwei Zeilen und zwei Spalten besteht (Abbildung 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

Ausrichtung in einem Rasterbereich festlegen

Sie können die Ausrichtung des UI-Elements in einem Rasterbereich festlegen, indem Sie sie im Parameter alignment des Modifikators gridItem angeben. Im folgenden Beispiel wird #1 in der Mitte des Rasterbereichs platziert, der aus zwei Spalten und zwei Zeilen besteht.

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

Automatische Platzierung in Kombination mit platzierten Elementen

Ein UI-Element in Grid, für das keine Position angegeben ist, wird automatisch platziert. In diesem Beispiel wird gezeigt, wie Sie automatisch platzierte Elemente und UI-Elemente mit angegebenen Rasterzellen kombinieren können. Karte 2 und Karte 4 werden in den angegebenen Rasterzellen platziert, die anderen Elemente werden automatisch platziert.

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