Impostare le proprietà degli elementi

Anche se la configurazione di 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

Posiziona 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 posizionato 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 posizionato nello spazio disponibile successivo in quella traccia. Se li specifichi entrambi, l'elemento viene posizionato nella 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 relativa alla fine. Ad esempio, per posizionare un elemento nella penultima riga e nella penultima colonna, utilizza gridItem(row = -2, column = -2).

Nell'esempio seguente, la scheda n. 2 viene posizionata 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

Estendere righe e colonne

Utilizza i parametri rowSpan e columnSpan per estendere un elemento su più celle. Puoi posizionare 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 posizionata 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

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 posizionato 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

Posizionamento automatico combinato con elementi posizionati

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