Módulo 7: Propiedades Avanzadas y Estilos

Personaliza cada píxel de tu interfaz con el Property Editor y Qt Style Sheets

---

Objetivos de Aprendizaje

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

• Dominar el Property Editor y todas sus secciones
• Aplicar Qt Style Sheets (QSS) para personalizar la apariencia
• Usar pseudo-estados para efectos hover, pressed, focus, etc.
• Estilizar widgets individuales y toda la aplicación
• Controlar tamaños y restricciones de widgets
• Crear temas visuales coherentes y profesionales
• Usar propiedades avanzadas como toolTip, whatsThis, y cursor

---

7.1 El Property Editor — Tu Centro de Control

El Property Editor muestra todas las propiedades del widget seleccionado, organizadas en secciones colapsables.

Secciones principales

QObject

💡 CONSEJO: El objectName es como el nombre de capa en Photoshop. Usa nombres descriptivos desde el inicio.

QWidget — Propiedades Visuales Básicas

Propiedades Específicas del Widget

Cada tipo de widget tiene propiedades adicionales que se muestran debajo de QWidget. Por ejemplo:

Para Label:

Para Push Button:

Para Line Edit:

---

7.2 Propiedades de Accesibilidad

💡 CONSEJO: Siempre agrega toolTip a los botones que solo tienen icono. Un botón con un icono de disquete sin tooltip no le dice nada a un usuario nuevo. Con un tooltip que diga "Guardar (Ctrl+S)", es mucho más claro.

---

7.3 Cursores del Mouse

La propiedad cursor cambia la forma del cursor cuando pasa sobre el widget.

---

7.4 Qt Style Sheets (QSS) — CSS para Qt

Qt Style Sheets es un sistema de estilos muy similar a CSS de la web. Puedes cambiar colores, bordes, bordes redondeados, gradientes, y mucho más.

🎨 ANALOGÍA DEL DISEÑO

>

Si Qt Designer es como diseñar en Figma, los Style Sheets son como el panel de estilos de Figma donde defines colores, sombras, bordes y efectos. La sintaxis es casi idéntica a CSS.

Cómo aplicar estilos

1. Selecciona un widget
2. En el Property Editor, busca la propiedad styleSheet
3. Haz clic en el botón ... para abrir el editor de style sheets
4. Escribe tus reglas CSS

Sintaxis básica

/* Selector de tipo */
QPushButton {
    background-color: #41CD52;
    color: #1a1a2e;
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
}

/* Selector por nombre de objeto */
#guardar_btn {
    background-color: #41CD52;
}

#cancelar_btn {
    background-color: #FF6B6B;
}

/* Pseudo-estados */
QPushButton:hover {
    background-color: #2D9B3E;
}

QPushButton:pressed {
    background-color: #1a7a2e;
}

QPushButton:disabled {
    background-color: #555;
    color: #888;
}

Estilizar un campo de texto

QLineEdit {
    background-color: #2d2d3d;
    color: #ffffff;
    border: 2px solid #444;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
}

QLineEdit:focus {
    border-color: #41CD52;
}

QLineEdit:disabled {
    background-color: #1a1a2e;
    color: #555;
}

Estilizar toda la ventana

/* Fondo de toda la ventana */
QDialog {
    background-color: #1a1a2e;
}

/* Todos los labels */
QLabel {
    color: #e0e0e0;
    font-size: 14px;
}

/* Todos los Group Boxes */
QGroupBox {
    border: 1px solid #444;
    border-radius: 8px;
    margin-top: 10px;
    padding-top: 15px;
    font-weight: bold;
    color: #41CD52;
}

QGroupBox::title {
    subcontrol-origin: margin;
    left: 10px;
    padding: 0 5px;
}

Estilizar un Combo Box

QComboBox {
    background-color: #2d2d3d;
    color: #ffffff;
    border: 2px solid #444;
    border-radius: 6px;
    padding: 6px 12px;
    min-width: 6em;
}

QComboBox:hover {
    border-color: #41CD52;
}

QComboBox::drop-down {
    border: none;
    width: 20px;
}

QComboBox::down-arrow {
    image: url(:/iconos/arrow-down.png);
    width: 12px;
    height: 12px;
}

QComboBox QAbstractItemView {
    background-color: #2d2d3d;
    color: #ffffff;
    selection-background-color: #41CD52;
    selection-color: #1a1a2e;
}

Estilizar un Slider

QSlider::groove:horizontal {
    background: #444;
    height: 6px;
    border-radius: 3px;
}

QSlider::handle:horizontal {
    background: #41CD52;
    width: 18px;
    margin: -6px 0;
    border-radius: 9px;
}

QSlider::handle:horizontal:hover {
    background: #2D9B3E;
}

QSlider::sub-page:horizontal {
    background: #41CD52;
    border-radius: 3px;
}

Estilizar un Check Box

QCheckBox {
    color: #e0e0e0;
    spacing: 8px;
}

QCheckBox::indicator {
    width: 18px;
    height: 18px;
    border: 2px solid #444;
    border-radius: 4px;
    background-color: #2d2d3d;
}

QCheckBox::indicator:checked {
    background-color: #41CD52;
    border-color: #41CD52;
}

QCheckBox::indicator:hover {
    border-color: #41CD52;
}

---

7.5 Pseudo-estados Disponibles

---

7.6 Sub-controles (Sub-controls)

Para widgets complejos, puedes estilizar partes individuales:

/* Scrollbar */
QScrollBar:vertical {
    background: #1a1a2e;
    width: 12px;
    border-radius: 6px;
}

QScrollBar::handle:vertical {
    background: #444;
    border-radius: 6px;
    min-height: 30px;
}

QScrollBar::handle:vertical:hover {
    background: #41CD52;
}

QScrollBar::add-line:vertical,
QScrollBar::sub-line:vertical {
    height: 0px;
}

/* Tab Widget */
QTabWidget::pane {
    border: 1px solid #444;
    border-radius: 6px;
    background: #2d2d3d;
}

QTabBar::tab {
    background: #1a1a2e;
    color: #888;
    padding: 8px 16px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

QTabBar::tab:selected {
    background: #2d2d3d;
    color: #41CD52;
}

QTabBar::tab:hover:!selected {
    background: #222240;
    color: #ccc;
}

/* Progress Bar */
QProgressBar {
    background-color: #2d2d3d;
    border: 1px solid #444;
    border-radius: 6px;
    text-align: center;
    color: #ffffff;
}

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

---

7.7 Gradientes

/* Gradiente lineal */
QPushButton {
    background: qlineargradient(x1:0, y1:0, x2:0, y2:1,
        stop:0 #41CD52, stop:1 #2D9B3E);
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
}

/* Gradiente radial */
QFrame {
    background: qradialgradient(cx:0.5, cy:0.5, radius:0.5,
        fx:0.5, fy:0.5,
        stop:0 #41CD52, stop:1 #1a1a2e);
}

/* Gradiente cónico */
QFrame {
    background: qconicalgradient(cx:0.5, cy:0.5, angle:0,
        stop:0 #41CD52, stop:0.5 #1D84BC, stop:1 #41CD52);
}

---

7.8 Tamanos y Restricciones

Propiedades de tamaño

🎨 ANALOGÍA DEL DISEÑO

>

Es como definir los constraints en Figma:

>

- "este botón debe tener al menos 120px de ancho" → minimumSize

- "este logo nunca debe pasar de 200px" → maximumSize

- "este texto debe tener el tamaño natural de la fuente" → sizeHint (automático)

Size Policy en detalle

---

7.9 Herencia de Estilos

Los estilos se heredan de padre a hijo. Si aplicas un styleSheet al Dialog, todos los widgets dentro heredarán esos estilos.

/* Aplicado al Dialog — afecta a TODOS los widgets hijos */
QDialog {
    background-color: #1a1a2e;
    font-family: "Segoe UI";
    font-size: 13px;
}

/* Pero puedes sobrescribir para widgets específicos */
QLineEdit {
    background-color: #2d2d3d;
    color: #ffffff;
}

QPushButton {
    background-color: #41CD52;
    color: #1a1a2e;
}

💡 CONSEJO: Aplica los estilos globales al widget padre (Dialog o MainWindow) y luego sobrescribe solo los widgets que necesitan estilos diferentes. Esto mantiene tu código limpio y consistente.

---

7.10 Temas Visuales — Ejemplo Completo

Tema Oscuro Profesional

/* === TEMA OSCURO PROFESIONAL === */

/* Fondo principal */
QDialog, QMainWindow, QWidget {
    background-color: #1a1a2e;
    color: #e0e0e0;
    font-family: "Segoe UI", "Arial", sans-serif;
    font-size: 13px;
}

/* Labels */
QLabel {
    color: #e0e0e0;
}

QLabel#titulo_label {
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
}

/* Campos de entrada */
QLineEdit, QTextEdit, QPlainTextEdit {
    background-color: #2d2d3d;
    color: #ffffff;
    border: 2px solid #444;
    border-radius: 6px;
    padding: 8px 12px;
    selection-background-color: #41CD52;
    selection-color: #1a1a2e;
}

QLineEdit:focus, QTextEdit:focus {
    border-color: #41CD52;
}

/* Botones */
QPushButton {
    background-color: #41CD52;
    color: #1a1a2e;
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 13px;
}

QPushButton:hover {
    background-color: #2D9B3E;
}

QPushButton:pressed {
    background-color: #1a7a2e;
}

QPushButton#cancelar_btn {
    background-color: #555;
    color: #ccc;
}

QPushButton#cancelar_btn:hover {
    background-color: #666;
}

/* Group Box */
QGroupBox {
    border: 1px solid #444;
    border-radius: 8px;
    margin-top: 12px;
    padding-top: 15px;
    font-weight: bold;
    color: #41CD52;
}

QGroupBox::title {
    subcontrol-origin: margin;
    left: 12px;
    padding: 0 8px;
}

/* Combo Box */
QComboBox {
    background-color: #2d2d3d;
    color: #ffffff;
    border: 2px solid #444;
    border-radius: 6px;
    padding: 6px 12px;
}

QComboBox:hover {
    border-color: #41CD52;
}

QComboBox::drop-down {
    border: none;
    width: 24px;
}

/* Slider */
QSlider::groove:horizontal {
    background: #444;
    height: 6px;
    border-radius: 3px;
}

QSlider::handle:horizontal {
    background: #41CD52;
    width: 18px;
    margin: -6px 0;
    border-radius: 9px;
}

QSlider::sub-page:horizontal {
    background: #41CD52;
    border-radius: 3px;
}

/* Check Box */
QCheckBox {
    color: #e0e0e0;
    spacing: 8px;
}

QCheckBox::indicator {
    width: 18px;
    height: 18px;
    border: 2px solid #444;
    border-radius: 4px;
    background-color: #2d2d3d;
}

QCheckBox::indicator:checked {
    background-color: #41CD52;
    border-color: #41CD52;
}

/* Scrollbar */
QScrollBar:vertical {
    background: #1a1a2e;
    width: 10px;
    border-radius: 5px;
}

QScrollBar::handle:vertical {
    background: #444;
    border-radius: 5px;
    min-height: 30px;
}

QScrollBar::handle:vertical:hover {
    background: #41CD52;
}

/* Tab Widget */
QTabWidget::pane {
    border: 1px solid #444;
    border-radius: 6px;
    background: #2d2d3d;
}

QTabBar::tab {
    background: #1a1a2e;
    color: #888;
    padding: 8px 16px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    margin-right: 2px;
}

QTabBar::tab:selected {
    background: #2d2d3d;
    color: #41CD52;
}

QTabBar::tab:hover:!selected {
    background: #222240;
    color: #ccc;
}

/* Progress Bar */
QProgressBar {
    background-color: #2d2d3d;
    border: 1px solid #444;
    border-radius: 6px;
    text-align: center;
    color: #ffffff;
    height: 20px;
}

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

/* List / Table / Tree */
QListWidget, QTableWidget, QTreeWidget {
    background-color: #2d2d3d;
    color: #ffffff;
    border: 1px solid #444;
    border-radius: 6px;
    gridline-color: #333;
}

QListWidget::item:selected,
QTableWidget::item:selected,
QTreeWidget::item:selected {
    background-color: #41CD52;
    color: #1a1a2e;
}

QHeaderView::section {
    background-color: #1a1a2e;
    color: #41CD52;
    padding: 6px;
    border: none;
    font-weight: bold;
}

/* Tool Box */
QToolBox::tab {
    background: #2d2d3d;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 8px;
    color: #e0e0e0;
    font-weight: bold;
}

QToolBox::tab:selected {
    background: #41CD52;
    color: #1a1a2e;
}

/* Spin Box */
QSpinBox, QDoubleSpinBox {
    background-color: #2d2d3d;
    color: #ffffff;
    border: 2px solid #444;
    border-radius: 6px;
    padding: 6px 12px;
}

QSpinBox:focus, QDoubleSpinBox:focus {
    border-color: #41CD52;
}

/* Calendar */
QCalendarWidget {
    background-color: #2d2d3d;
    color: #ffffff;
}

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

QCalendarWidget QMenu {
    background-color: #2d2d3d;
    color: #ffffff;
}

QCalendarWidget QSpinBox {
    background-color: #1a1a2e;
    color: #ffffff;
}

QCalendarWidget QWidget#qt_calendar_navigationbar {
    background-color: #1a1a2e;
}

/* LCD Number */
QLCDNumber {
    background-color: #0d1117;
    color: #41CD52;
    border: 2px solid #444;
    border-radius: 6px;
}

---

Ejercicio Práctico del Módulo

🏋️ EJERCICIO 7: Tarjeta de Producto con Estilos Profesionales

>

Objetivo: Crear una tarjeta de producto con estilos profesionales usando Qt Style Sheets.

>

Pasos:

1. Crea un Dialog de 400x350 píxeles

2. Cambia el windowTitle a "Producto"

3. Aplica un estilo de fondo oscuro al Dialog: background-color: #1a1a2e;

4. Agrega un Frame como contenedor de la tarjeta:

- styleSheet: background-color: #2d2d3d; border-radius: 12px;

- minimumSize: 360x300

- Aplica un Layout Vertical al Frame

5. Dentro del Frame, agrega un Label para el nombre del producto:

- text: "Auriculares Premium"

- font: 18pt, Bold, blanco

- alignment: AlignCenter

6. Agrega un Label para una descripción breve:

- text: "Sonido envolvente 7.1 con cancelación de ruido activa"

- font: 11pt, color gris (#aaa)

- alignment: AlignCenter

- wordWrap: true

7. Agrega un Label para el precio:

- text: "$149.99"

- font: 24pt, Bold, color verde (#41CD52)

- alignment: AlignCenter

8. Agrega un Label para la descripción detallada:

- text: "Auriculares inalámbricos con Bluetooth 5.2, batería de 40 horas, micrófono integrado y estuche de carga."

- font: 11pt, color gris claro

- wordWrap: true

- alignment: AlignCenter

9. Agrega un Push Button con texto "🛒 Agregar al Carrito":

- font: 13pt, Bold

- styleSheet:

`css

QPushButton {

background-color: #41CD52;

color: #1a1a2e;

border: none;

padding: 12px 24px;

border-radius: 8px;

font-weight: bold;

}

QPushButton:hover {

background-color: #2D9B3E;

}

QPushButton:pressed {

background-color: #1a7a2e;

}

`

10. Agrega un Horizontal Line como separador antes del botón

11. Renombra todos los widgets

12. Guarda como tarjeta_producto.ui

13. Presiona Ctrl+R y verifica que se vea profesional

>

Resultado esperado: Una tarjeta de producto elegante con fondo oscuro, tipografía jerárquica, precio destacado en verde y un botón llamativo con efecto hover.

---

Recursos Adicionales

---

Evaluación de Comprensión

1. ¿Qué propiedad del Property Editor usarías para agregar un texto de ayuda al pasar el mouse?
2. ¿Cuál es la diferencia entre toolTip y whatsThis?
3. ¿Cómo aplicas un estilo a TODOS los botones de una ventana?
4. ¿Cómo aplicas un estilo a UN botón específico?
5. ¿Qué pseudo-estado usarías para cambiar el color de un botón cuando el mouse pasa sobre él?
6. ¿Qué es un sub-control en Qt Style Sheets? Da un ejemplo.
7. ¿Cómo creas un gradiente lineal en QSS?
8. ¿Qué sizePolicy usarías para un widget que debe ocupar todo el espacio disponible?
9. ¿Cómo haces que los estilos se apliquen a todos los widgets hijos?
10. ¿Qué cursor usarías para un elemento que el usuario puede arrastrar?

---

Módulo anterior: ← [Módulo 6: Signals y Slots](05-signals-slots.md)

Siguiente módulo: → [Módulo 8: Iconos y Recursos](07-iconos-recursos.md)

    QPushButton {
        background-color: #41CD52;
        color: #1a1a2e;
        border: none;
        padding: 12px 24px;
        border-radius: 8px;
        font-weight: bold;
    }
    QPushButton:hover {
        background-color: #2D9B3E;
    }
    QPushButton:pressed {
        background-color: #1a7a2e;
    }