Cómo establecer propiedades del elemento

Mientras que la configuración de Grid define la estructura general, usas el modificador gridItem para controlar la posición, la extensión 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 índices de coordenadas funcionan mejor para 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 se basan en 1, es decir, 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 ambas, el elemento se colocará en esa celda.

Usa un número entero positivo para especificar el índice de la pista desde el principio. 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 #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

Cómo abarcar 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 #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

Establece 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

Ubicación automática combinada con elementos ubicados

Un elemento de la IU en Grid que no tiene una especificación de posición se coloca automáticamente. En este ejemplo, se muestra cómo puedes mezclar elementos colocados automáticamente y los elementos de la IU con celdas de cuadrícula especificadas. Las tarjetas 2 y 4 se colocan en 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