Diseño de tabla de cuadrícula

Ícono de calificación de cuatro estrellas

En esta receta, se muestra cómo la Grid API mejora la legibilidad del código en comparación con las estructuras anidadas tradicionales. Si configuras pistas de tamaño automático, puedes crear una cuadrícula que se adapte de forma dinámica al ancho y la altura de las celdas según el tamaño intrínseco de tus elementos componibles de texto.

En esta receta, compilarás una tabla con la API de Grid.

Tabla 1: Comparación de funciones de las APIs de FlexBox y Grid
Diseño Carga diferida Ajuste suave Actualización de diseño dinámico
FlexBox 1D No Sí Sí
Grid 2D No No Sí

Prácticas recomendadas

Usa el Grid elemento componible para mejorar la legibilidad y el mantenimiento de la tabla. Grid te brinda un control preciso sobre las dimensiones y la alineación de las columnas en todas las filas sin sincronizar los anchos de forma manual.

Ingredientes

  • Grid: Es un diseño componible que coloca elementos en una cuadrícula bidimensional. La configuración del diseño se especifica dentro del parámetro lambda config, mientras que los elementos de contenido de la IU se declaran dentro del parámetro lambda content.
  • GridTrackSize.Auto: Especifica el tamaño automático de la pista dentro de la configuración de la cuadrícula según el tamaño intrínseco del contenido, por ejemplo, column(GridTrackSize.Auto) y row(GridTrackSize.Auto).
  • gap(): Configura el espaciado de filas y columnas dentro de GridConfigurationScope, como gap(row = 8.dp, column = 16.dp).

Pasos

Compila una tabla de comparación de varias columnas con un solo diseño Grid con alineación automática de columnas y tamaño de pista para todos los elementos.

1. Cuenta las filas y columnas de la cuadrícula para determinar los tamaños de las pistas

Primero, cuenta las columnas y las filas para determinar el tamaño de las pistas:

  • Columnas: Es la cantidad de atributos que comparas, más una columna para el nombre del elemento.
  • Filas: Es la cantidad de elementos que comparas, más una fila de encabezado.

Para esta receta, que compara dos componentes (FlexBox y Grid) en cuatro atributos, necesitas cinco columnas y tres filas.

2. Implementa la tabla de comparación con Grid

Crea un elemento componible TableInGrid que use Grid para diseñar los elementos de la tabla. Llama a las funciones column y row dentro de la lambda config para definir los tamaños de las pistas y establecer el espaciado de las celdas con gap(). Debido a que el texto tiene un tamaño intrínseco, GridTrackSize.Auto ajusta automáticamente el tamaño de las columnas y las filas para que se ajusten a su contenido.

Dentro de la lambda content, coloca los encabezados y los datos de la tabla. Grid controla automáticamente la ubicación y la alineación de todas las celdas:

@Composable
fun TableInGrid(
    modifier: Modifier = Modifier,
) {
    Grid(
        config = {
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            gap(row = 8.dp, column = 16.dp)
        },
        modifier = modifier,
    ) {
        // Table Header
        Text(text = "", fontWeight = FontWeight.Bold)
        Text(text = "Layout", fontWeight = FontWeight.Bold)
        Text(text = "Lazy loading", fontWeight = FontWeight.Bold)
        Text(text = "Soft wrap", fontWeight = FontWeight.Bold)
        Text(text = "Dynamic layout update", fontWeight = FontWeight.Bold)

        // FlexBox Row
        Text(text = "FlexBox", fontWeight = FontWeight.Bold)
        Text(text = "1D")
        Text(text = "No")
        Text(text = "Yes")
        Text(text = "Yes")

        // Grid Row
        Text(text = "Grid", fontWeight = FontWeight.Bold)
        Text(text = "2D")
        Text(text = "No")
        Text(text = "No")
        Text(text = "Yes")
    }
}

Resultados

Ahora, creaste una tabla de comparación bidimensional limpia con alineación automática de columnas y espaciado entre celdas.

Figura 1. La tabla de comparación con un elemento Grid.

Recursos adicionales