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

Alors que la configuration Grid définit la structure globale, 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 avec les paramètres row et column.

Les paramètres row et column spécifient les index de piste de ligne et de colonne dans lesquels l'élément est placé. Les index de pistes sont basés sur 1 (ils commencent à 1). Si vous ne spécifiez que row ou column (et non les deux), l'élément est placé dans le premier espace disponible de la piste. Si vous spécifiez les deux, l'élément est placé 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 colonne, utilisez gridItem(row = -2, column = -2).

Dans l'exemple suivant, la carte #2 est placée sur la deuxième ligne et 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 de 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

Étendre des lignes et des 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 une zone composée de plusieurs cellules de grille. Le modificateur gridItem vous permet de spécifier la zone de 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 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'UI dans Grid qui ne comporte aucune 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 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