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. Koordinatenindexe eignen sich am besten für einfache Rasterlayouts. Bei größeren oder komplexeren Layouts sollten Sie stattdessen benannte Bereiche definieren.

Mit den Parametern row und column werden die Zeilen- und Spaltenindexe angegeben, 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.

Verwenden Sie eine positive Ganzzahl, um den Trackindex ab dem Start anzugeben. 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 ein Element beispielsweise 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 (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))
}

Karte 2 befindet sich in der Zelle in der zweiten Zeile und der zweiten Spalte und Karte 3 in der ersten Spalte in der dritten Zeile.
Abbildung 1: Karte 2 wird in der Zelle in der zweiten Zeile und der zweiten Spalte platziert und Karte 3 in der ersten Spalte in der dritten Zeile.

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 besteht aus mehreren Rasterzellen. Mit dem Modifikator gridItem können Sie den Rasterbereich mit den Parametern rowSpan und columnSpan angeben. Im folgenden Beispiel wird Karte #1 in den Bereich mit zwei Zeilen und zwei Spalten platziert (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))
}

Karte 4 erstreckt sich über drei Spalten.
Abbildung 2. Karte 4 erstreckt sich über drei Spalten.

Ausrichtung in einem Rasterbereich festlegen

Sie können die Ausrichtung des UI-Elements in einem Grid-Bereich 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))
}

Der Text mit der Nummer 1 befindet sich in der Mitte des Rasterbereichs, der aus zwei Zeilen und zwei Spalten besteht.
Abbildung 3: Der Text mit #1 wird in der Mitte des Rasterbereichs platziert, der aus zwei Zeilen und zwei Spalten besteht.

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 sehen Sie, 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()
}

Karte 3 wird neben Karte <b>1</b> platziert, da es sich um ein automatisches Placement handelt.
Abbildung 4. Karte #3 wird neben Karte #1 platziert, da sie automatisch platziert wird.
Zurück
Containerattribute festlegen
Weiter
Übersicht