Impostare le proprietà degli elementi

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

Impostare la posizione dell'elemento

Inserisci un elemento in una traccia o cella specifica con i parametri row e column. Gli indici delle coordinate sono ideali 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 viene inserito l'elemento. Gli indici delle tracce sono basati su 1, ovvero iniziano da 1. Se specifichi solo row o column (non entrambi), l'elemento viene inserito nel primo spazio disponibile della traccia. Se 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 inserire un elemento nella prima riga e colonna, utilizza gridItem(row = 1, column = 1).

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

Nell'esempio seguente, la scheda #2 si trova nella seconda riga e nella seconda colonna. La scheda n. 3 è assegnata all'ultima riga (indicizzata da -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

Estendere righe e colonne

Utilizza i parametri rowSpan e columnSpan per estendere un elemento su più celle. Puoi inserire un elemento dell'interfaccia utente in un'area della griglia, ovvero l'area costituita da diverse celle della griglia. Il modificatore gridItem ti consente di specificare l'area della griglia con i parametri rowSpan e columnSpan. Nell'esempio seguente, la scheda #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

Impostare 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 specifica di posizione viene posizionato automaticamente. Questo esempio mostra come combinare elementi posizionati automaticamente e gli elementi dell'interfaccia utente con celle della griglia specificate. Le schede #2 e #4 vengono posizionate nelle 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