Impostare le proprietà degli elementi

Anche se 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.

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 in base 1, ovvero iniziano da 1. Se specifichi solo row o column (non entrambi), l'elemento viene inserito nel primo spazio disponibile in quella traccia. Se li specifichi entrambi, l'elemento viene inserito nella cella.

Utilizza un numero intero positivo per specificare l'indice della traccia dall'inizio. Ad esempio, per inserire un elemento nella prima riga e nella prima 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 nella penultima colonna, utilizza gridItem(row = -2, column = -2).

Nell'esempio seguente, la scheda n. 2 viene inserita nella seconda riga e nella seconda colonna. La scheda n. 3 viene 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

Figura 1. La scheda n. 2 viene inserita nella cella della griglia nella seconda riga e nella seconda colonna, mentre la scheda n. 3 viene inserita nella prima colonna della terza riga.

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 più 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 n. 1 viene inserita nell'area costituita 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

Figura 2. La scheda n. 4 si estende su tre colonne.

Impostare l'allineamento in un'area della griglia

Puoi impostare l'allineamento dell'elemento dell'interfaccia utente in un'area della griglia specificandolo nel parametro alignment del modificatore gridItem. Nell'esempio seguente, n. 1 viene inserito al centro dell'area della griglia costituita 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

Figura 3. Il testo con n. 1 viene inserito al centro dell'area della griglia costituita da due righe e due colonne.

Posizionamento automatico combinato con elementi posizionati

Un elemento dell'interfaccia utente in Grid senza una specifica di posizione viene sottoposto al posizionamento automatico. Questo esempio mostra come combinare elementi posizionati automaticamente ed elementi dell'interfaccia utente con celle della griglia specificate. Le schede n. 2 e n. 4 sono 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

Figura 4. La scheda n. 3 viene inserita accanto alla scheda n. 1, in quanto si tratta di un posizionamento automatico.