Elementattribute festlegen

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

Elementposition festlegen

Mit den Parametern row und column können Sie ein Element in einem bestimmten Track oder einer bestimmten Zelle platzieren. Koordinatenindizes eignen sich am besten für einfache Rasterlayouts. Bei größeren oder komplexeren Layouts sollten Sie stattdessen benannte Bereiche definieren.

Die Parameter row und column geben die Zeilen- und Spalten-Track-Indizes 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 in diesem Track platziert. Wenn Sie beides angeben, wird das Element in dieser Zelle platziert.

Verwenden Sie eine positive Ganzzahl, um den Track-Index vom Anfang an anzugeben. Wenn Sie beispielsweise ein Element 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 (indexiert mit -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

Abbildung 1. Karte #2 wird in der Rasterzelle in der zweiten Zeile und der zweiten Spalte platziert. Karte #3 wird in der ersten Spalte in der dritten Zeile platziert.

Zeilen und Spalten überspannen

Mit den Parametern rowSpan und columnSpan können Sie ein Element über mehrere Zellen hinweg spannen. 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 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

Abbildung 2. Karte #4 umfasst drei Spalten.

Ausrichtung in einem Rasterbereich festlegen

Sie können die Ausrichtung des UI-Elements in einem Rasterbereich festlegen , indem Sie sie im alignment Parameter des gridItem Modifikators 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

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 ohne Positionsangabe 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 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

Abbildung 4. Karte #3 wird neben Karte #1 platziert, da sie automatisch platziert wird.