Cómo establecer las propiedades del contenedor

Puedes definir una configuración de contenedor de cuadrícula para crear diseños flexibles que respondan a diferentes tamaños de pantalla y tipos de contenido. En esta página, se describe cómo hacer lo siguiente:

• Define una cuadrícula: Configura la estructura básica de filas y columnas.
• Coloca elementos en una cuadrícula: Comprende cómo se colocan los elementos en las celdas de la cuadrícula y cómo cambiar la dirección del flujo.
• Administrar el tamaño de las pistas: Usa tamaños fijos, porcentuales, flexibles y propios para establecer los tamaños de las pistas.
• Establecer brechas: Administra los "canales" entre filas y columnas.

Cómo definir una cuadrícula

Una cuadrícula consta de columnas y filas. El elemento Grid componible tiene un parámetro config que acepta una lambda para definir las columnas y las filas dentro de GridConfigurationScope. En el siguiente ejemplo, se define una cuadrícula con tres filas y dos columnas, cada una con un tamaño fijo especificado en Dp:

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
}
DefineGrid.kt

Coloca elementos en una cuadrícula

Grid toma los elementos de la IU en la lambda content y los coloca en celdas de cuadrícula. La cuadrícula organiza los elementos independientemente de si definiste explícitamente las filas y las columnas. De forma predeterminada, Grid intenta colocar un elemento de la IU en la celda de cuadrícula disponible de la fila. Si no puede, lo coloca en una celda de cuadrícula disponible de la siguiente fila. Si no hay celdas vacías, Grid crea una fila nueva.

En el siguiente ejemplo, la cuadrícula tiene seis celdas y coloca una tarjeta en cada una (figura 1). Cada celda de la cuadrícula mide 160dp × 90dp, lo que hace que el tamaño total de la cuadrícula sea de 320dp × 270dp.

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
DefineGrid.kt

Para cambiar este comportamiento predeterminado y que se complete por columna, establece la propiedad flow en GridFlow.Column.

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp)
        flow = GridFlow.Column // Grid tries to place items to fill the column
    },
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridItem.kt

Administra el tamaño del segmento

Las filas y las columnas se denominan en conjunto pista de cuadrícula. Puedes especificar el tamaño de un segmento de pista de cuadrícula con uno de los siguientes métodos:

• Fijo (Dp): Asigna un tamaño específico (p.ej., column(180.dp)).
• Porcentaje (Float): Asigna un porcentaje del espacio total disponible de 0.0f a 1.0f (p.ej., row(0.5f) para el 50%).
• Flexible (Fr): Distribuye el espacio restante de forma proporcional después de que se calculan los segmentos fijos y los de porcentaje. Por ejemplo, si dos filas se establecen en 1.fr y 3.fr, la última recibe el 75% de la altura restante.
• Intrínseco: Establece el tamaño del segmento según el contenido que incluye. Para obtener más información, consulta Cómo determinar el tamaño de la pista de la cuadrícula de forma intrínseca.

En el siguiente ejemplo, se usan las diferentes opciones de tamaño de pista para definir las alturas de las filas:

Grid(
    config = {
        column(1f)

        row(100.dp)
        row(0.2f)
        row(1.fr)
        row(GridTrackSize.Auto)
    },
    modifier = Modifier.height(480.dp)
) {
    PastelRedCard("Fixed(100.dp)")
GridTrackSize.kt

Determina el tamaño del recorrido de la cuadrícula de forma intrínseca

Puedes usar el tamaño intrínseco para un Grid cuando quieras que el diseño se adapte al contenido, en lugar de forzarlo a un contenedor fijo. El tamaño de la pista de la cuadrícula se determina con los siguientes valores:

• GridTrackSize.MaxContent: Usa el tamaño intrínseco máximo del contenido (p.ej., el ancho se determina según la longitud completa del texto en un bloque de texto sin ajuste).
• GridTrackSize.MinContent: Usa el tamaño intrínseco mínimo del contenido (p.ej., el ancho se determina según la palabra más larga en un bloque de texto).
• GridTrackSize.Auto: Usa un tamaño flexible para un segmento que se adapte según el espacio disponible. De forma predeterminada, se comporta como MaxContent, pero reduce y ajusta su contenido para que quepa dentro del contenedor principal.

En el siguiente ejemplo, se colocan dos textos uno al lado del otro. El tamaño de la columna para el primer texto se determina según el ancho mínimo requerido para mostrar el texto, y el ancho de la segunda columna depende del ancho máximo requerido del texto.

Grid(
    config = {
        column(GridTrackSize.MinContent)
        column(GridTrackSize.MaxContent)
        row(1.0f)
    },
    modifier = Modifier.width(480.dp)
) {
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet." )
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet." )
}
GridTrackSize.kt

Cómo establecer espacios entre filas y columnas

Una vez que se hayan establecido los tamaños de las pistas de la cuadrícula, puedes modificar el espacio entre las columnas y filas de la cuadrícula para definir mejor el espaciado entre las pistas. Puedes especificar la brecha entre columnas con la función columnGap y la brecha entre filas con rowGap. En el siguiente ejemplo, hay una brecha de 16dp entre cada fila y una brecha de 8dp entre cada columna (figura 5).

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(16.dp)
        columnGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridGap.kt

También puedes usar la función de conveniencia gap para definir espacios del mismo tamaño de columna y fila, y para definir los tamaños de columna y espacio por separado con una sola función. El siguiente código agrega espacios 8dp a la cuadrícula:

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp) // Equivalent to columnGap(8.dp) and rowGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridGap.kt