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 parámetros row y column especifican los índices de pista de fila y columna 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 se especifican 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 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), 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

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