Définir les propriétés des éléments

La configuration Grid définit la structure globale, mais vous utilisez le modificateur gridItem pour contrôler la position, l'étendue et l'alignement des éléments dans cette structure.

Définir la position de l'élément

Placez un élément dans une piste ou une cellule spécifique à l'aide des paramètres row et column. Les index de coordonnées sont plus adaptés aux mises en page en grille simples. Pour les mises en page plus grandes ou plus complexes, définissez plutôt des zones nommées.

Les paramètres row et column spécifient les index de ligne et de colonne dans lesquels l'élément est placé. Les index de pistes sont basés sur 1, c'est-à-dire qu'ils commencent à 1. Si vous ne spécifiez que row ou column (pas les deux), l'élément est placé dans l'espace disponible suivant de cette piste. La spécification des deux place l'élément dans cette cellule.

Utilisez un entier positif pour spécifier l'index de la piste à partir du début. Par exemple, pour placer un élément dans la première ligne et la première colonne, utilisez gridItem(row = 1, column = 1).

Utilisez un entier négatif pour spécifier la piste par rapport à la fin. Par exemple, pour placer un élément dans l'avant-dernière ligne et l'avant-dernière colonne, utilisez gridItem(row = -2, column = -2).

Dans l'exemple suivant, la fiche 2 est placée sur la deuxième ligne et dans la deuxième colonne. La carte 3 est attribuée à la dernière ligne (indexée par -1), où elle occupe automatiquement la première colonne disponible dans cette piste (figure 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

Répartir sur plusieurs lignes et colonnes

Utilisez les paramètres rowSpan et columnSpan pour étendre un élément sur plusieurs cellules. Vous pouvez placer un élément d'interface utilisateur dans une zone de grille, qui est la zone composée de plusieurs cellules de grille. Le modificateur gridItem vous permet de spécifier la zone de la grille avec les paramètres rowSpan et columnSpan. Dans l'exemple suivant, la carte 1 est placée dans la zone composée de deux lignes et de deux colonnes (figure 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

Définir l'alignement dans une zone de grille

Vous pouvez définir l'alignement de l'élément d'interface utilisateur dans une zone de grille en le spécifiant dans le paramètre alignment du modificateur gridItem. Dans l'exemple suivant, #1 est placé au centre de la zone de la grille composée de deux colonnes et de deux lignes.

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

Placement automatique combiné à des éléments placés

Un élément d'interface utilisateur dans Grid qui n'a pas de spécification de position est placé automatiquement. Cet exemple montre comment mélanger des éléments placés automatiquement et des éléments d'interface utilisateur avec des cellules de grille spécifiées. Les cartes 2 et 4 sont placées dans des cellules de grille spécifiées, et les autres éléments sont placés automatiquement.

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