Elementattribute festlegen

Die Grid-Konfiguration definiert die Gesamtstruktur. Mit dem Modifikator gridItem können Sie die Position, die Spanne und die Ausrichtung von Elementen innerhalb 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.

Die Parameter row und column geben die Zeilen- und Spaltenindexe an, in denen das Element platziert wird. Track-Indizes 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 auf diesem Track platziert. Wenn Sie beides angeben, wird das Element in diese Zelle eingefügt.

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 erstrecken. Sie können ein UI-Element in einem Rasterbereich platzieren. Dieser Bereich besteht aus mehreren Rasterzellen. Mit dem Modifikator gridItem können Sie den Rasterbereich mit den Parametern rowSpan und columnSpan angeben. Im folgenden Beispiel befindet sich Karte #1 im Bereich, 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 sind bestimmte Rasterzellen. 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