Módulo 12: Widgets Especializados

Widgets avanzados para casos de uso específicos

---

Objetivos de Aprendizaje

Al finalizar este módulo serás capaz de:

• Usar Calendar Widget para selección de fechas
• Implementar Progress Bar y LCD Number para indicadores visuales
• Utilizar Graphics View para áreas de dibujo
• Integrar Custom Widgets de la biblioteca QT-PyQt-PySide-Custom-Widgets
• Seleccionar el widget adecuado para cada caso de uso avanzado
• Configurar propiedades avanzadas de cada widget especializado

---

12.1 Calendar Widget

Muestra un calendario interactivo completo. El usuario puede seleccionar fechas, navegar entre meses y años.

Propiedades clave

Signals útiles

Cómo estilizar el Calendar Widget

QCalendarWidget {
    background-color: #2d2d3d;
    color: #ffffff;
    border-radius: 8px;
}

QCalendarWidget QToolButton {
    color: #41CD52;
    background-color: #1a1a2e;
    border: none;
    border-radius: 4px;
    padding: 6px;
    font-weight: bold;
}

QCalendarWidget QToolButton:hover {
    background-color: #41CD52;
    color: #1a1a2e;
}

QCalendarWidget QMenu {
    background-color: #2d2d3d;
    color: #ffffff;
    border: 1px solid #444;
}

QCalendarWidget QSpinBox {
    background-color: #1a1a2e;
    color: #ffffff;
    border: 1px solid #444;
    border-radius: 4px;
}

QCalendarWidget QWidget#qt_calendar_navigationbar {
    background-color: #1a1a2e;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

QCalendarWidget QAbstractItemView:enabled {
    color: #ffffff;
    selection-background-color: #41CD52;
    selection-color: #1a1a2e;
}

QCalendarWidget QAbstractItemView:disabled {
    color: #555;
}

🎨 ANALOGÍA DEL DISEÑO

>

El Calendar Widget es como el componente de calendario que usarías en un diseño de app de reservas o agenda. Ya viene completamente funcional, no tienes que diseñarlo desde cero.

---

12.2 Progress Bar — Barra de Progreso

Muestra el avance de una operación de forma visual.

Propiedades clave

Estilos para Progress Bar

/* Barra de progreso estándar */
QProgressBar {
    background-color: #2d2d3d;
    border: 1px solid #444;
    border-radius: 10px;
    text-align: center;
    color: #ffffff;
    height: 20px;
    font-weight: bold;
}

QProgressBar::chunk {
    background-color: #41CD52;
    border-radius: 9px;
}

/* Barra de progreso con gradiente */
QProgressBar::chunk {
    background: qlineargradient(x1:0, y1:0, x2:1, y2:0,
        stop:0 #41CD52, stop:1 #1D84BC);
    border-radius: 9px;
}

/* Barra de progreso vertical */
QProgressBar:vertical {
    width: 20px;
    height: 200px;
}

Signals útiles

---

12.3 LCD Number — Display Digital

Muestra números en un display estilo reloj digital.

Propiedades clave

Estilos para LCD Number

QLCDNumber {
    background-color: #0d1117;
    color: #41CD52;
    border: 2px solid #444;
    border-radius: 8px;
    padding: 8px;
}

Cuándo usar LCD Number

• Contadores de tiempo (cronómetros, timers)
• Marcadores de puntuación
• Displays de temperatura, velocidad, etc.
• Cuando quieres un efecto visual retro/digital

---

12.4 Graphics View — Área de Dibujo

Un área de dibujo avanzada donde puedes mostrar gráficos 2D, diagramas, mapas y visualizaciones interactivas.

Características

• Soporta zoom, paneo (arrastre) y selección de elementos
• Puede mostrar formas geométricas, imágenes, texto y elementos personalizados
• Es la base para crear aplicaciones de dibujo, diagramas o visualización de datos

Propiedades clave

Cuándo usar Graphics View

• Aplicaciones de dibujo o edición de imágenes
• Diagramas y flujogramas
• Mapas interactivos
• Visualización de datos (gráficos, diagramas)
• Juegos 2D simples
• Editores de circuitos o planos

🎨 ANALOGÍA DEL DISEÑO

>

El Graphics View es como el lienzo de Illustrator: un área infinita donde puedes colocar formas, imágenes y texto, hacer zoom, y moverte libremente.

---

12.5 Custom Widgets — QT-PyQt-PySide-Custom-Widgets

Además de los widgets estándar de Qt, existe la biblioteca QT-PyQt-PySide-Custom-Widgets que agrega widgets modernos y animados.

Instalación

pip install QT-PyQt-PySide-Custom-Widgets

Widgets Disponibles

Botones Animados

Navegación

Controles

Progreso y Carga

Display

Temas

Efectos

Cómo usar Custom Widgets en Qt Designer

1. Instala la biblioteca: pip install QT-PyQt-PySide-Custom-Widgets
2. Inicia Qt Designer con los plugins: Custom_Widgets --start-designer --plugins
3. Los widgets custom aparecerán en el Widget Box en una categoría separada
4. Arrastra y suelta como cualquier otro widget

💡 CONSEJO: Estos widgets custom también aparecen en Qt Designer una vez instalada la biblioteca. Puedes arrastrarlos y soltarlos igual que los widgets estándar.

---

12.6 Tabla Comparativa de Widgets Especializados

---

Ejercicio Práctico del Módulo

🏋️ EJERCICIO 12: Dashboard de Métricas

>

Objetivo: Crear un dashboard con widgets especializados para mostrar métricas.

>

Pasos:

1. Crea un Dialog de 600x500 píxeles con fondo oscuro (#1a1a2e)

2. Cambia el windowTitle a "Dashboard de Métricas"

3. Aplica un Layout Vertical al Dialog

4. Agrega un Label de título: "Dashboard" (fuente 20pt, Bold, blanco)

5. Agrega un Calendar Widget en la parte superior

6. Debajo del calendario, agrega un Grid Layout con 2 columnas:

- Columna izquierda:

- Label "Progreso del proyecto:" + Progress Bar (value: 75, textVisible: true)

- Label "Tareas completadas:" + LCD Number (digitCount: 3, value: 42)

- Columna derecha:

- Label "Velocidad:" + Dial (min: 0, max: 100, value: 65)

- Label "Nivel:" + LCD Number (digitCount: 2, value: 65)

7. Conecta el Dial al LCD Number de "Nivel" usando Signals/Slots

8. Debajo del Grid, agrega un Label: "Estado del sistema:"

9. Agrega un Horizontal Layout con:

- Label "CPU:" + Progress Bar (value: 45)

- Label "RAM:" + Progress Bar (value: 72)

- Label "Disco:" + Progress Bar (value: 33)

10. Estiliza todos los Progress Bars con el tema verde

11. Estiliza los LCD Numbers con fondo oscuro y texto verde

12. Renombra todos los widgets

13. Guarda como dashboard.ui

14. Presiona Ctrl+R y verifica que el dial controle el LCD Number

>

Resultado esperado: Un dashboard con calendario, barras de progreso, displays digitales y un dial interactivo, todo con tema oscuro coherente.

---

Recursos Adicionales

---

Evaluación de Comprensión

1. ¿Qué widget usarías para que el usuario seleccione una fecha?
2. ¿Cómo muestras un número en un display estilo reloj digital?
3. ¿Qué propiedad del Progress Bar controla si muestra el porcentaje?
4. ¿Para qué sirve el Graphics View?
5. ¿Cómo instalas los Custom Widgets?
6. ¿Qué widget custom usarías para una barra lateral de navegación?
7. ¿Qué widget custom usarías para una tarjeta con efecto de elevación?
8. ¿Cómo conectas un Dial a un LCD Number para que muestre su valor?
9. ¿Qué formato de texto muestra el Progress Bar con %p%?
10. ¿Qué widget usarías para un medidor tipo velocímetro?

---

Módulo anterior: ← [Módulo 11: Formularios](10-formularios.md)

Siguiente módulo: → [Módulo 13: Exportación](12-exportacion.md)