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.

Establece la posición del elemento

Coloca un elemento en una pista o celda específica con los parámetros row y column.

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 seguimiento se basan en 1, es decir, comienzan en uno. Si especificas solo row o column (no ambos), el elemento se coloca en el siguiente espacio disponible en esa pista. Si especificas ambos, el elemento se coloca en esa celda.

Usa un número entero positivo para especificar el índice de seguimiento 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 la pista 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), donde ocupa automáticamente la primera columna disponible en esa pista (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 tarjeta nº 2 se coloca en la celda de la cuadrícula en la segunda fila y la segunda columna, y la tarjeta nº 3 se coloca en la primera columna de la tercera fila.

Extiende filas y columnas

Usa los parámetros rowSpan y columnSpan para extender 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 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

Figura 2. La tarjeta nº 4 abarca tres columnas.

Establece la alineación en un área de cuadrícula

Para establecer la alineación del elemento de la IU en un área de cuadrícula especifícala en el parámetro alignment del modificador gridItem. En el siguiente ejemplo, nº 1 se coloca en el centro del área de 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

Figura 3. El texto con nº 1 se coloca en el centro del área de cuadrícula que consta de dos filas y dos columnas.

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. La tarjeta nº 2 y la tarjeta nº 4 son celdas de 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

Figura 4. La tarjeta nº 3 se coloca junto a la tarjeta nº 1, ya que es una colocación automática.