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:

Definir una cuadrícula

Una cuadrícula consta de columnas y filas. El elemento componible Grid 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 que tiene 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)
        }
    }
) {
}

Colocar elementos en una cuadrícula

Grid toma los elementos de la IU en la lambda content y los coloca en las celdas de la cuadrícula. La cuadrícula dispone 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 la cuadrícula disponible en la fila; si no puede, lo coloca en una celda de la cuadrícula disponible en 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 es de 160dp x 90dp, lo que hace que el tamaño total de la cuadrícula sea de 320dp x 270dp.

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

Seis tarjetas se colocan en una cuadrícula que tiene tres filas y dos columnas.
Figura 1. Se colocan seis tarjetas en una cuadrícula que tiene tres filas y dos columnas.

Para cambiar este comportamiento predeterminado a un relleno 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()
}

La función de flujo cambia la dirección para colocar elementos.
Figura 2. GridFlow.Row (izquierda) y GridFlow.Column (derecha).

Administrar el tamaño de los recorridos

Las filas y las columnas se denominan colectivamente recorrido de la cuadrícula. Puedes especificar el tamaño de un recorrido de la 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 disponible total 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 recorridos fijos y porcentuales. Por ejemplo, si dos filas se establecen en 1.fr y 3.fr, la última recibe el 75% de la altura restante.
  • Intrínseco: Dimensiona el recorrido según el contenido que contiene. Para obtener más información, consulta Determina el tamaño del recorrido de la cuadrícula de forma intrínseca.

En el siguiente ejemplo, se usan las diferentes opciones de tamaño de recorrido 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)")
        PastelGreenCard("Percentage(0.2f)")
    PastelBlueCard("Flex(1.fr)")
        PastelYellowCard("Auto")

}

Alturas de filas definidas con las cuatro opciones principales de tamaño de pistas.
Figura 3. Alturas de filas definidas con las cuatro opciones principales de tamaño de recorrido en Grid.

Establece el tamaño mínimo para los recorridos de cuadrícula flexibles

Cuando un contenedor de cuadrícula no tiene espacio restante, un recorrido flexible estándar puede reducirse a 0.dp. Para evitar esto y asegurarte de que el contenido no se comprima, usa GridTrackSize.MinMax para aplicar un tamaño mínimo explícito mientras mantienes el recorrido flexible.

En el siguiente ejemplo, se asigna al menos 100.dp a la primera fila:

Grid(
    config = {
        column(1f)
        // The first row has a minimum height of 100.dp and can expand to 
        // the half of the remaining space.
        row(GridTrackSize.MinMax(100.dp, 1.fr))
        // The second row takes the half of the remaining space.
        row(1.fr)
        // The third row has a fixed height of 200.dp.
        row(200.dp)
    },
    modifier = Modifier.size(360.dp) // Total grid height is 360.dp
) {
    PastelRedCard("MinMax(100.dp, 1.fr)")
        PastelGreenCard("Flex(1.fr)")
    PastelBlueCard("Fixed(200.dp)")
}

Alturas de filas definidas con las cuatro opciones principales de tamaño de pistas.
Figura 4. La primera fila tiene al menos 100.dp de altura.

Establece el tamaño mínimo del recorrido de la cuadrícula para colocar listas diferidas

Los recorridos flexibles estándar consultan automáticamente los tamaños intrínsecos de sus elementos secundarios para establecer un tamaño base. Sin embargo, Jetpack Compose prohíbe consultar los tamaños intrínsecos de SubcomposeLayout, que admite componentes, como LazyColumn y LazyRow.

Colocar una lista diferida dentro de un recorrido flexible estándar provoca una IllegalStateException falla. Para colocar listas diferidas de forma segura dentro de un recorrido de cuadrícula flexible, usa MinMax con un tamaño mínimo explícito (como 0.dp) para omitir el paso de medición intrínseca.

Grid(
    config = {
        column(1f)
        // The first row's height is determined by the height of the Text composable.
        row(GridTrackSize.Auto)
        // The second row occupies the remaining space, allowing the LazyColumn to scroll.
        row(GridTrackSize.MinMax(0.dp, 1.fr))

        gap(8.dp)
    },
    modifier = Modifier.size(width = 170.dp, height = 240.dp)
) {
    Text("Lazy column in a Grid")
    // The LazyColumn is placed in the second row, filling the remaining space.
    LazyColumn(verticalArrangement = Arrangement.spacedBy(4.dp)) {
        items(100) { number ->
            PastelGreenCard("Card $number")
        }
    }
}

Alturas de filas definidas con las cuatro opciones principales de tamaño de pistas.
Figura 5. LazyColumn en una celda de la cuadrícula.

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 del recorrido 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 por 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 por la palabra más larga en un bloque de texto).
  • GridTrackSize.Auto: Usa un tamaño flexible para un recorrido que se adapte según el espacio disponible. Se comporta como MaxContent de forma predeterminada, pero reduce y ajusta su contenido para que quepa dentro del contenedor superior.

En el siguiente ejemplo, se colocan dos textos uno al lado del otro. El tamaño de la columna del primer texto se determina por 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.")
}

Son los tamaños intrínsecos especificados en las columnas.
Figura 5. Tamaños intrínsecos especificados en las columnas.

Establece espacios entre filas y columnas

Una vez que se dimensionan los recorridos de la cuadrícula, puedes modificar el espacio de la cuadrícula para ajustar el espacio entre los recorridos. Puedes especificar el espacio de la columna con la columnGap función, y el espacio de la fila con rowGap. En el siguiente ejemplo, hay un espacio de 16dp entre cada fila y un espacio 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()
}

Son los espacios entre filas y columnas.
Figura 6. Espacios entre filas y columnas.

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 de 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()
}

Anterior
Comenzar
Siguiente
Cómo establecer propiedades del elemento