Ejemplo Básico de Configuración de Cuadrícula

Analicemos un ejemplo inicial de configuración de rejilla:

/**
 * Configuración básica de cuadrícula
 */
void ejemplo_cuadricula_basica(void) {
    static lv_coord_t columnas[] = {80, 80, 80, LV_GRID_TEMPLATE_LAST};
    static lv_coord_t filas[] = {55, 55, 55, LV_GRID_TEMPLATE_LAST};
    
    lv_obj_t *contenedor = lv_obj_create(lv_scr_act());
    lv_obj_set_style_grid_column_dsc_array(contenedor, columnas, 0);
    lv_obj_set_style_grid_row_dsc_array(contenedor, filas, 0);
    lv_obj_set_size(contenedor, 320, 230);
    lv_obj_center(contenedor);
    lv_obj_set_layout(contenedor, LV_LAYOUT_GRID);
    
    for(uint8_t idx = 0; idx < 9; idx++) {
        uint8_t col = idx % 3;
        uint8_t fila = idx / 3;
        
        lv_obj_t *boton = lv_btn_create(contenedor);
        lv_obj_set_grid_cell(boton, 
            LV_GRID_ALIGN_STRETCH, col, 1,
            LV_GRID_ALIGN_STRETCH, fila, 1);
        
        lv_obj_t *etiqueta = lv_label_create(boton);
        lv_label_set_text_fmt(etiqueta, "Col%d,Fil%d", col, fila);
        lv_obj_center(etiqueta);
    }
}

Parámetros clave:

• columnas[]: Define 3 columnas de 80px cada una
• filas[]: Define 3 filas de 55px cada una
• LV_GRID_TEMPLATE_LAST: Marcador obligatorio al final del array

Expansión de Celdas

Modificación para ocupar múltiples celdas:

static lv_coord_t columnas[] = {80, 80, 30, 30, 80, 80, LV_GRID_TEMPLATE_LAST};

void ejemplo_expansion_celdas(void) {
    // Configuración inicial similar
    // ...
    for(uint8_t idx = 0; idx < 9; idx++) {
        uint8_t col = idx % 3;
        uint8_t fila = idx / 3;
        
        lv_obj_t *boton = lv_btn_create(contenedor);
        lv_obj_set_grid_cell(boton, 
            LV_GRID_ALIGN_STRETCH, col*2, 2,  // Ocupa 2 columnas
            LV_GRID_ALIGN_STRETCH, fila, 1);
        // ...
    }
}

Configuración Avanzada con Unidades Flexibles

Ejemplo con descriptores avanzados:

void cuadricula_avanzada(void) {
    static lv_coord_t columnas[] = {
        LV_GRID_CONTENT, 8, 
        LV_GRID_CONTENT, 
        LV_GRID_FR(2), 
        LV_GRID_FR(1), 
        LV_GRID_FR(1),
        LV_GRID_TEMPLATE_LAST
    };
    static lv_coord_t filas[] = {
        LV_GRID_CONTENT, 
        LV_GRID_CONTENT, 
        12, 
        LV_GRID_CONTENT, 
        LV_GRID_CONTENT, 
        LV_GRID_TEMPLATE_LAST
    };
    
    // Implementación de colocación manual
    lv_obj_t *elementos[3][3];
    // ... creación de objetos
    lv_obj_set_grid_cell(elementos[0][0], LV_GRID_ALIGN_CENTER, 0, 1, 0, 5);
    lv_obj_set_grid_cell(elementos[0][1], LV_GRID_ALIGN_START, 2, 2, 0, 1);
}

Enterpretación de Descirptores

• LV_GRID_CONTENT: Tamaño basado en contenido
• LV_GRID_FR(n): Unidad flexible (proporcional)
• Valores numéricos: Tamaño fijo en píxeles