Elementattribute festlegen

Während die Grid-Konfiguration die Gesamtstruktur definiert, verwenden Sie den Modifikator gridItem, um die Position, die Ausdehnung und die Ausrichtung von Elementen innerhalb dieser Struktur zu 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. Definieren Sie für größere oder komplexere Layouts stattdessen benannte Bereiche.

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 in diesem Track platziert. Wenn Sie beides angeben, wird das Element in dieser Zelle platziert.

Verwenden Sie eine positive Ganzzahl, um den Track-Index von 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 (Index -1) zugewiesen, wo sie automatisch die erste verfügbare Spalte in diesem Track belegt (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 verbinden

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

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 gemischt 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 bestimmten Rasterzellen kombinieren können. Karte 2 und Karte 4 werden in bestimmten 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