Impostare le proprietà degli elementi

Mentre la configurazione Grid definisce la struttura complessiva, utilizza il modificatore gridItem per controllare la posizione, l'estensione e l'allineamento degli elementi all'interno di questa struttura.

Imposta la posizione dell'elemento

Posiziona un elemento in una traccia o cella specifica con i parametri row e column. Gli indici delle coordinate funzionano meglio per i layout a griglia semplici. Per layout più grandi o complessi, definisci invece aree denominate.

I parametri row e column specificano gli indici delle tracce di riga e colonna in cui è posizionato l'elemento. Gli indici delle tracce sono basati su 1, ovvero iniziano da uno. Se specifichi solo row o column (non entrambi), l'elemento viene posizionato nello spazio disponibile successivo della traccia. Se li specifichi entrambi, l'elemento viene inserito in quella cella.

Utilizza un numero intero positivo per specificare l'indice della traccia dall'inizio. Ad esempio, per posizionare un elemento nella prima riga e nella prima colonna, utilizza gridItem(row = 1, column = 1).

Utilizza un numero intero negativo per specificare la traccia rispetto alla fine. Ad esempio, per posizionare un elemento nella penultima riga e colonna, utilizza gridItem(row = -2, column = -2).

Nell'esempio seguente, la scheda #2 è posizionata nella seconda riga e nella seconda colonna. La scheda #3 è assegnata all'ultima riga (indicizzata con -1), dove occupa automaticamente la prima colonna disponibile in quella traccia (Figura 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

Estendi righe e colonne

Utilizza i parametri rowSpan e columnSpan per estendere un elemento su più celle. Puoi posizionare un elemento UI in un'area della griglia, ovvero l'area composta da diverse celle della griglia. Il modificatore gridItem consente di specificare l'area della griglia con i parametri rowSpan e columnSpan. Nell'esempio seguente, la scheda n. 1 è posizionata nell'area composta da due righe e due colonne (Figura 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

Imposta l'allineamento in un'area della griglia

Puoi impostare l'allineamento dell'elemento UI in un'area della griglia specificandolo nel parametro alignment del modificatore gridItem. Nell'esempio seguente, #1 è posizionato al centro dell'area della griglia composta da due colonne e due righe.

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

Posizionamento automatico combinato con elementi posizionati

Un elemento UI in Grid che non ha una posizione specificata viene posizionato automaticamente. Questo esempio mostra come combinare elementi posizionati automaticamente ed elementi UI con celle della griglia specificate. La scheda #2 e la scheda #4 vengono posizionate in celle della griglia specificate, mentre gli altri elementi vengono posizionati automaticamente.

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