Diseño de tabla de cuadrícula

Ícono de calificación de cuatro estrellas

En esta receta, se muestra cómo la API de Grid 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 de texto componibles.

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 de línea suave Actualización del diseño dinámico
FlexBox 1D No Sí Sí
Grid 2D No No Sí

Prácticas recomendadas

Usa el elemento de componibilidad Grid 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 que admite composición y 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

Crea una tabla de comparación de varias columnas con un solo diseño de 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 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 artículo.
  • Filas: Es la cantidad de elementos que comparas, más una fila de encabezado.

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

2. Implementa una tabla de comparación con Grid

Crea un elemento componible TableInGrid que use Grid para diseñar los elementos de tu tabla. Llama a las funciones column y row dentro de la lambda config para definir los tamaños de las pistas y establece el espaciado de las celdas con gap(). Como 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 adapten 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 Grid.

Recursos adicionales