Containerattribute festlegen

Sie können eine Grid-Containerkonfiguration definieren, um flexible Layouts zu erstellen, die auf verschiedene Bildschirmgrößen und Inhaltstypen reagieren. Auf dieser Seite wird Folgendes beschrieben:

• Raster definieren: Richten Sie die grundlegende Struktur aus Zeilen und Spalten ein.
• Elemente in einem Raster platzieren: Hier erfahren Sie, wie Elemente in Rasterzellen platziert werden und wie Sie die Flussrichtung ändern.
• Track-Größen verwalten: Mit festen, fraktionierten, flexiblen und intrinsischen Größen können Sie Track-Größen festlegen.
• Abstände festlegen: Hier können Sie die Abstände zwischen Zeilen und Spalten verwalten.

Raster definieren

Ein Raster besteht aus Spalten und Zeilen. Die zusammensetzbare Funktion Grid hat einen config-Parameter, der ein Lambda akzeptiert, um die Spalten und Zeilen in GridConfigurationScope zu definieren. Im folgenden Beispiel wird ein Raster mit drei Zeilen und zwei Spalten definiert, die jeweils eine feste Größe haben, die in Dp angegeben ist:

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
}
DefineGrid.kt

Elemente in einem Raster platzieren

Grid nimmt die UI-Elemente im content-Lambda-Ausdruck und platziert sie in Rasterzellen. Im Raster werden Elemente angeordnet, unabhängig davon, ob Sie die Zeilen und Spalten explizit definiert haben. Standardmäßig versucht Grid, ein UI-Element in der verfügbaren Rasterzelle in der Zeile zu platzieren. Wenn das nicht möglich ist, wird es in einer verfügbaren Rasterzelle in der nächsten Zeile platziert. Wenn keine leeren Zellen vorhanden sind, wird mit Grid eine neue Zeile erstellt.

Im folgenden Beispiel hat das Raster sechs Rasterzellen und in jeder wird eine Karte platziert (Abbildung 1). Jede Rasterzelle ist 160dp × 90dp groß. Die Gesamtgröße des Rasters beträgt 320dp × 270dp.

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
DefineGrid.kt

Abbildung 1. Sechs Karten werden in einem Raster mit drei Zeilen und zwei Spalten platziert.

Wenn Sie dieses Standardverhalten ändern und die Tabelle spaltenweise füllen möchten, legen Sie die Eigenschaft flow auf GridFlow.Column fest.

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp)
        flow = GridFlow.Column // Grid tries to place items to fill the column
    },
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridItem.kt

Abbildung 2. GridFlow.Row (links) und GridFlow.Column (rechts).

Trackgröße verwalten

Zeilen und Spalten werden zusammen als Rasterspur bezeichnet. Sie können die Größe eines Grid-Tracks mit einer der folgenden Methoden angeben:

• Fest (Dp): Weist eine bestimmte Größe zu (z.B. column(180.dp)).
• Bruchteil (Float): Weist einen Prozentsatz des insgesamt verfügbaren Speicherplatzes von 0.0f bis 1.0f zu (z.B. row(0.5f) für 50%).
• Flexibel (Fr): Der verbleibende Speicherplatz wird proportional verteilt, nachdem die Berechnungen für Tracks mit fester und mit relativer Länge abgeschlossen sind. Wenn beispielsweise zwei Zeilen auf 1.fr und 3.fr festgelegt sind, erhält die zweite Zeile 75% der verbleibenden Höhe.
• Intrinsic: Die Größe des Tracks wird basierend auf dem Inhalt darin festgelegt. Weitere Informationen finden Sie unter Größe von Grid-Tracks intrinsisch bestimmen.

Im folgenden Beispiel werden die verschiedenen Optionen für die Größenanpassung von Tracks verwendet, um die Zeilenhöhen zu definieren:

Grid(
    config = {
        column(1f)

        row(100.dp)
        row(0.2f)
        row(1.fr)
        row(GridTrackSize.Auto)
    },
    modifier = Modifier.height(480.dp)
) {
    PastelRedCard("Fixed(100.dp)")
GridTrackSize.kt

Abbildung 3. Zeilenhöhen, die mit den vier primären Optionen für die Spaltengröße in Grid definiert werden.

Größe von Raster-Tracks intrinsisch bestimmen

Sie können die natürliche Größe für ein Grid verwenden, wenn das Layout an den Inhalt angepasst werden soll, anstatt es in einen festen Container zu zwingen. Die Größe der Grid-Spur wird mit den folgenden Werten bestimmt:

• GridTrackSize.MaxContent: Die maximale intrinsische Größe des Inhalts verwenden (z.B. wird die Breite durch die volle Länge des Texts in einem Textblock ohne Umbruch bestimmt).
• GridTrackSize.MinContent: Verwenden Sie die minimale intrinsische Größe des Inhalts (z.B. wird die Breite durch das längste einzelne Wort in einem Textblock bestimmt).
• GridTrackSize.Auto: Verwenden Sie eine flexible Größe für einen Track, die sich an den verfügbaren Platz anpasst. Standardmäßig verhält es sich wie MaxContent, aber der Inhalt wird verkleinert und umgebrochen, damit er in den übergeordneten Container passt.

Im folgenden Beispiel werden zwei Texte nebeneinander platziert. Die Spaltengröße für den ersten Text wird durch die erforderliche Mindestbreite für die Anzeige des Texts bestimmt. Die Breite der zweiten Spalte hängt von der erforderlichen maximalen Breite des Texts ab.

Grid(
    config = {
        column(GridTrackSize.MinContent)
        column(GridTrackSize.MaxContent)
        row(1.0f)
    },
    modifier = Modifier.width(480.dp)
) {
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet." )
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet." )
}
GridTrackSize.kt

Abbildung 4. Die in den Spalten angegebenen intrinsischen Größen.

Abstände zwischen Zeilen und Spalten festlegen

Sobald die Rasterspuren dimensioniert sind, können Sie den Rasterabstand anpassen, um den Abstand zwischen den Spuren zu optimieren. Sie können den Spaltenabstand mit der Funktion columnGap und den Zeilenabstand mit rowGap angeben. Im folgenden Beispiel gibt es eine 16dp-Lücke zwischen den einzelnen Zeilen und eine 8dp-Lücke zwischen den einzelnen Spalten (Abbildung 5).

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(16.dp)
        columnGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridGap.kt

Abbildung 5: Lücken zwischen Zeilen und Spalten.

Sie können auch die praktische Funktion gap verwenden, um Lücken mit derselben Spalten- und Zeilengröße zu definieren und Spalten- und Lückengrößen mit einer einzigen Funktion separat zu definieren. Mit dem folgenden Code werden dem Raster 8dp Lücken hinzugefügt:

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp) // Equivalent to columnGap(8.dp) and rowGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridGap.kt