Cómo establecer propiedades del elemento

Si bien la configuración de Grid define la estructura general, usas el modificador gridItem para controlar la posición, el alcance y la alineación de los elementos dentro de esa estructura.

Cómo establecer la posición del elemento

Coloca un elemento en una pista o celda específica con los parámetros row y column. Los índices de coordenadas funcionan mejor para los diseños de cuadrícula sencillos. Para diseños más grandes o complejos, define áreas con nombre.

Los parámetros row y column especifican los índices de seguimiento de filas y columnas en los que se coloca el elemento. Los índices de pistas comienzan en uno. Si especificas solo row o column (no ambos), el elemento se colocará en el siguiente espacio disponible de esa pista. Si especificas ambos, el elemento se colocará en esa celda.

Usa un número entero positivo para especificar el índice de la pista desde el inicio. Por ejemplo, para colocar un elemento en la primera fila y columna, usa gridItem(row = 1, column = 1).

Usa un número entero negativo para especificar el segmento en relación con el final. Por ejemplo, para colocar un elemento en la penúltima fila y columna, usa gridItem(row = -2, column = -2).

En el siguiente ejemplo, la tarjeta nº 2 se coloca en la segunda fila y la segunda columna. La tarjeta nº 3 se asigna a la última fila (indexada por -1), en la que ocupa automáticamente la primera columna disponible en ese segmento (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

Extender filas y columnas

Usa los parámetros rowSpan y columnSpan para abarcar un elemento en varias celdas. Puedes colocar un elemento de la IU en un área de cuadrícula, que es el área que consta de varias celdas de cuadrícula. El modificador gridItem te permite especificar el área de la cuadrícula con los parámetros rowSpan y columnSpan. En el siguiente ejemplo, la tarjeta nº 1 se coloca en el área que consta de dos filas y dos columnas (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

Cómo establecer la alineación en un área de cuadrícula

Puedes establecer la alineación del elemento de la IU en un área de cuadrícula especificándola en el parámetro alignment del modificador gridItem. En el siguiente ejemplo, #1 se coloca en el centro del área de la cuadrícula, que consta de dos columnas y dos filas.

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

Colocación automática combinada con elementos colocados

Un elemento de la IU en Grid que no tiene especificación de posición se somete a la colocación automática. En este ejemplo, se muestra cómo puedes combinar elementos colocados automáticamente y elementos de la IU con celdas de cuadrícula especificadas. Las tarjetas nº 2 y nº 4 se colocan en las celdas de la cuadrícula especificadas, y los demás elementos se colocan automáticamente.

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