Módulo 3: Widgets Básicos — Tu Caja de Herramientas

Conoce cada widget disponible, para qué sirve y cuándo usarlo

---

Objetivos de Aprendizaje

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

Identificar y usar todos los widgets de Display (visualización)
Diferenciar y aplicar correctamente cada tipo de botón
Seleccionar el widget de entrada de datos adecuado para cada situación
Usar widgets de visualización de datos (listas, tablas, árboles)
Configurar las propiedades principales de cada widget
Combinar widgets básicos para crear interfaces funcionales

---

3.1 Widgets de Display (Visualización)

Estos widgets sirven para mostrar información al usuario. Son como los elementos de texto e imagen de tu diseño.

Label — El Widget Más Versátil

El Label es tu herramienta más básica y poderosa. Puede mostrar:

Texto simple: "Bienvenido a la aplicación"
Texto con formato HTML: Negrita y cursiva
Imágenes: A través de la propiedad pixmap
Texto alineado: Izquierda, centro, derecha, justificado

📸 [PLACEHOLDER PARA IMAGEN]: Captura de pantalla mostrando un Label con texto simple, otro con HTML formateado, y otro con una imagen.

Propiedades clave del Label

Propiedad	Descripción	Ejemplo
-----------	-------------	---------
text	El texto que muestra	"Hola Mundo"
textFormat	Formato del texto (PlainText, RichText, AutoText, MarkdownText)	`RichText` para HTML
alignment	Alineación del texto	`AlignCenter`, `AlignLeft`, `AlignRight`
wordWrap	Si el texto se ajusta en varias líneas	`true` / `false`
pixmap	Imagen que muestra	`:/imagenes/logo.png`
scaledContents	Si la imagen se escala al tamaño del Label	`true` para ajustar imagen
margin	Margen interno del Label	`10` píxeles
indent	Sangría del texto	`5` píxeles

Ejemplo de HTML en Labels

<!-- Negrita y cursiva -->
<b>Texto en negrita</b> y <i>texto en cursiva</i>

<!-- Colores -->
<font color="#41CD52">Texto verde</font>

<!-- Tamaño -->
<font size="5">Texto grande</font>

<!-- Combinado -->
<font color="#41CD52" size="4"><b>Título destacado</b></font>

<!-- Enlace -->
<a href="https://ejemplo.com">Haz clic aquí</a>

<!-- Imagen -->
<img src=":/imagenes/icono.png" />

<!-- Salto de línea -->
Línea 1<br/>Línea 2

💡 CONSEJO: Un Label puede mostrar HTML básico. Usa etiquetas como , , , y para crear texto enriquecido sin salir de Qt Designer.

---

Text Browser

Muestra texto con formato rico, incluyendo hipervínculos clicables. Es como un mini navegador de solo lectura.

Propiedad Descripción

----------- -------------

**html** Contenido HTML completo

**readOnly** Siempre es de solo lectura

**openExternalLinks** Si los links externos se abren en el navegador

🎨 ANALOGÍA DEL DISEÑO

>

Un Text Browser es como un cuadro de texto enriquecido en InDesign: puede contener texto formateado, imágenes y links, pero el usuario no puede editarlo.

---

Graphics View

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

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

🎨 ANALOGÍA DEL DISEÑO

>

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

---

Calendar Widget

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

Propiedad Descripción

----------- -------------

**selectedDate** La fecha seleccionada actualmente

**minimumDate / maximumDate** Rango de fechas permitidas

**gridVisible** Mostrar u ocultar la cuadrícula

**horizontalHeaderFormat** Formato del encabezado horizontal

**verticalHeaderFormat** Formato del encabezado vertical

**firstDayOfWeek** Primer día de la semana (Lunes, Domingo, etc.)

---

LCD Number

Display de números estilo reloj digital. Ideal para contadores, timers, marcadores.

Propiedad Descripción Ejemplo

----------- ------------- ---------

**digitCount** Cantidad de dígitos a mostrar `4` para "12:30"

**value** El número a mostrar `42`

**mode** Hex, Dec, Oct, Bin `Dec` para decimal

**segmentStyle** Flat, Filled, Outline `Filled` para estilo clásico

---

Progress Bar

Barra de progreso visual. Perfecta para mostrar el avance de operaciones largas.

Propiedad Descripción Ejemplo

----------- ------------- ---------

**minimum / maximum** Rango de valores `0` y `100`

**value** Valor actual `75`

**textVisible** Mostrar el porcentaje como texto `true`

**orientation** Horizontal o Vertical `Horizontal`

**format** Formato del texto `%p%` para porcentaje

**invertedAppearance** Barra invertida (de derecha a izquierda) `false`

---

Horizontal / Vertical Line

Líneas separadoras decorativas. Son como las líneas divisorias en un layout de diseño.

Propiedad Descripción

----------- -------------

**frameShape** HLine (horizontal) o VLine (vertical)

**frameShadow** Plain, Raised, Sunken

---

3.2 Widgets de Botones

Los botones son los elementos con los que el usuario interactúa para realizar acciones.

Push Button — El Botón Clásico

El botón rectangular estándar. Es el más usado en cualquier interfaz.

Propiedad Descripción Ejemplo

----------- ------------- ---------

**text** Texto del botón "Guardar"

**icon** Icono del botón `:/iconos/save.png`

**iconSize** Tamaño del icono `24, 24`

**default** Botón por defecto (se activa con Enter) `true` para el botón principal

**flat** Sin borde elevado `false`

**autoDefault** Se vuelve default al tener foco `true`

💡 CONSEJO: Usa la propiedad default en el botón principal de tu formulario (como "Guardar" o "Aceptar"). Así el usuario puede presionar Enter para activarlo sin necesidad de hacer clic.

---

Tool Button

Botón diseñado para mostrar principalmente un icono. Ideal para toolbars y barras de herramientas.

Propiedad Descripción

----------- -------------

**icon** Icono principal

**text** Texto opcional

**toolButtonStyle** Cómo mostrar icono y texto (IconOnly, TextOnly, TextBesideIcon, TextUnderIcon)

**autoRaise** Se eleva solo al pasar el mouse

**popupMode** DelayedPopup, MenuButtonPopup, InstantPopup

---

Radio Button

Botones de selección única. Solo uno puede estar activo a la vez dentro del mismo grupo.

🎨 ANALOGÍA DEL DISEÑO

>

Los Radio Buttons son como las opciones de un menú donde solo puedes elegir una. Como elegir el tamaño de una pizza: pequeña, mediana o grande. No puedes elegir dos tamaños a la vez.

Propiedad Descripción

----------- -------------

**text** Texto junto al radio button

**checked** Si está seleccionado o no

**autoExclusive** Si se comporta como grupo exclusivo

Cómo agrupar Radio Buttons:

Colócalos dentro del mismo contenedor (Group Box, Frame, Widget) para que funcionen como grupo. Solo uno podrá estar seleccionado a la vez.

---

Check Box

Casillas de verificación para selección múltiple. Varios pueden estar activos al mismo tiempo.

🎨 ANALOGÍA DEL DISEÑO

>

Los Check Boxes son como los toppings de una pizza: puedes elegir varios al mismo tiempo (pepperoni Y queso extra Y champiñones). Cada uno es independiente.

Propiedad Descripción

----------- -------------

**text** Texto junto al checkbox

**checked** Si está marcado o no

**tristate** Si tiene 3 estados (marcado, desmarcado, parcialmente marcado)

---

Command Link Button

Botón estilo Windows Vista con un título principal y una descripción secundaria.

Propiedad Descripción

----------- -------------

**text** Título principal

**description** Descripción secundaria (texto más pequeño debajo)

**icon** Icono opcional

---

Dialog Button Box

Un conjunto predefinido de botones estándar para diálogos.

Botón Rol Cuándo aparece

------- ----- ----------------

**Ok** AcceptRole Confirmar acción

**Cancel** RejectRole Cancelar acción

**Save** AcceptRole Guardar cambios

**Discard** DestructiveRole Descartar cambios

**Apply** ApplyRole Aplicar cambios sin cerrar

**Reset** ResetRole Restaurar valores originales

**Help** HelpRole Abrir ayuda

**Yes / No** YesRole / NoRole Respuestas a preguntas

💡 CONSEJO: Usa Dialog Button Box cuando necesites los botones estándar de un diálogo. Qt los coloca automáticamente en la posición correcta según el sistema operativo.

---

3.3 Widgets de Entrada de Datos

Estos widgets permiten al usuario introducir información.

Line Edit — Campo de Texto de Una Línea

El campo de texto más básico y común. Perfecto para nombres, emails, contraseñas, etc.

Propiedad Descripción Ejemplo

----------- ------------- ---------

**text** El contenido actual "Juan Pérez"

**placeholderText** Texto gris cuando está vacío "Escribe tu nombre..."

**maxLength** Máximo número de caracteres `50`

**readOnly** Solo lectura (no editable) `false`

**echoMode** Cómo se muestra el texto `Normal`, `Password`, `NoEcho`

**alignment** Alineación del texto `AlignLeft`, `AlignCenter`

**clearButtonEnabled** Botón X para limpiar `true`

**inputMask** Máscara de entrada `000-000-0000` para teléfono

💡 CONSEJO: La propiedad echoMode en modo Password muestra puntos (***) en lugar del texto real. Perfecto para campos de contraseña.

---

Text Edit

Editor de texto multilínea con formato (negrita, cursiva, colores, etc.).

Propiedad Descripción

----------- -------------

**html** Contenido HTML

**readOnly** Si es de solo lectura

**placeholderText** Texto cuando está vacío

---

Plain Text Edit

Editor de texto multilínea sin formato. Ideal para notas, código, texto largo sin estilo.

Propiedad Descripción

----------- -------------

**plainText** El contenido como texto plano

**readOnly** Si es de solo lectura

**placeholderText** Texto cuando está vacío

**tabStopDistance** Distancia de tabulación

---

Combo Box

Lista desplegable de opciones. El usuario selecciona una de varias opciones predefinidas.

Propiedad Descripción

----------- -------------

**currentText** Texto de la opción seleccionada

**currentIndex** Índice de la opción seleccionada (0 = primera)

**editable** Si el usuario puede escribir su propia opción

**maxVisibleItems** Máximo de items visibles en la lista desplegable

**insertPolicy** Cómo se insertan nuevos items

Cómo agregar opciones:

Selecciona el Combo Box

En el Property Editor, busca la propiedad model o currentText

Haz doble clic en el Combo Box en el área de trabajo para abrir el editor de items

Agrega, elimina o reordena las opciones

---

Font Combo Box

Combo box especializado que muestra todas las fuentes disponibles en el sistema.

---

Spin Box

Selector numérico entero con flechas arriba/abajo.

Propiedad Descripción Ejemplo

----------- ------------- ---------

**value** Valor actual `25`

**minimum** Valor mínimo `0`

**maximum** Valor máximo `100`

**singleStep** Incremento al hacer clic en las flechas `1`

**prefix** Texto antes del número `$`

**suffix** Texto después del número `kg`, `%`, `años`

---

Double Spin Box

Igual que Spin Box pero acepta números decimales.

Propiedad Descripción Ejemplo

----------- ------------- ---------

**decimals** Número de decimales `2` para "$19.99"

---

Time Edit / Date Edit / Date/Time Edit

Selectores de hora, fecha y fecha+hora respectivamente.

Widget Formato por defecto Uso típico

-------- ------------------- ------------

**Time Edit** `HH:mm` Programar una cita

**Date Edit** `yyyy-MM-dd` Fecha de nacimiento

**Date/Time Edit** `yyyy-MM-dd HH:mm` Programar evento

Propiedad Descripción

----------- -------------

**displayFormat** Formato de visualización

**minimumDate / maximumDate** Rango de fechas permitidas

**calendarPopup** Mostrar calendario desplegable (Date Edit)

---

Dial

Control giratorio tipo perilla. Similar a los controles de volumen de un equipo de sonido.

Propiedad Descripción

----------- -------------

**value** Valor actual

**minimum / maximum** Rango de valores

**notchesVisible** Mostrar marcas de referencia

**notchTarget** Distancia entre marcas

**wrapping** Si el valor se envuelve al llegar al máximo

---

Horizontal / Vertical Slider

Deslizador para seleccionar un valor dentro de un rango.

Propiedad Descripción

----------- -------------

**value** Valor actual

**minimum / maximum** Rango de valores

**singleStep** Incremento con teclado

**pageStep** Incremento al hacer clic en la barra

**tickPosition** Posición de las marcas (NoTicks, TicksAbove, TicksBelow, etc.)

**tickInterval** Intervalo entre marcas

**tracking** Si el valor cambia mientras se arrastra

---

Key Sequence Edit

Captura combinaciones de teclas. El usuario presiona una combinación y el widget la registra.

Propiedad Descripción

----------- -------------

**keySequence** La combinación de teclas capturada

---

3.4 Widgets de Visualización de Datos

List Widget

Lista de elementos seleccionables.

Propiedad Descripción

----------- -------------

**currentRow** Fila seleccionada actualmente

**selectionMode** SingleSelection, MultiSelection, ExtendedSelection

**viewMode** ListMode (lista) o IconMode (iconos)

**movement** Si los items se pueden mover (Static, Free, Snap)

**spacing** Espacio entre items

**gridSize** Tamaño de la cuadrícula (en modo IconMode)

Cómo agregar items:

Haz clic derecho en el List Widget

Selecciona "Edit Items"

Haz clic en "+" para agregar un nuevo item

Escribe el texto del item

🎨 ANALOGÍA DEL DISEÑO

>

Un List Widget es como una lista de capas en Photoshop: una lista vertical de elementos que puedes seleccionar individualmente.

---

Tree Widget

Árbol jerárquico con niveles. Perfecto para mostrar estructuras con padres e hijos.

Propiedad Descripción

----------- -------------

**columnCount** Número de columnas

**headerLabels** Textos de los encabezados de columna

**headerVisible** Mostrar u ocultar encabezados

**indentation** Sangría entre niveles

**animated** Animar expandir/colapsar

**itemsExpandable** Si los items se pueden expandir

Cómo agregar items:

Haz clic derecho > "Edit Items"

Haz clic en "+" para agregar un item raíz

Selecciona un item y haz clic en "+" para agregar un hijo

Configura el texto de cada columna

🎨 ANALOGÍA DEL DISEÑO

>

Un Tree Widget es como el panel de carpetas del explorador de archivos o el panel de Capas de Photoshop con grupos: puedes expandir y colapsar niveles para ver más o menos detalle.

---

Table Widget

Tabla de filas y columnas. Como una hoja de cálculo embebida.

Propiedad Descripción

----------- -------------

**rowCount** Número de filas

**columnCount** Número de columnas

**horizontalHeaderLabels** Encabezados de columnas

**verticalHeaderLabels** Encabezados de filas

**showGrid** Mostrar líneas de cuadrícula

**sortingEnabled** Permitir ordenar por columna

**editTriggers** Cuándo se pueden editar las celdas

Cómo configurar:

Establece rowCount y columnCount en el Property Editor

Haz clic derecho > "Edit Items" para editar celdas

Configura horizontalHeaderLabels para los títulos de columna

🎨 ANALOGÍA DEL DISEÑO

>

Un Table Widget es como una hoja de Excel embebida en tu aplicación: filas, columnas, celdas editables y encabezados.

---

3.5 Tabla Resumen de Todos los Widgets Básicos

Categoría Widget Para qué sirve Propiedad clave

----------- -------- ---------------- -----------------

**Display** Label Mostrar texto o imagen `text`, `pixmap`

**Display** Text Browser Texto con formato y links `html`

**Display** Graphics View Área de dibujo 2D —

**Display** Calendar Widget Calendario interactivo `selectedDate`

**Display** LCD Number Display digital `value`, `digitCount`

**Display** Progress Bar Barra de progreso `value`, `maximum`

**Display** HLine / VLine Líneas separadoras `frameShape`

**Buttons** Push Button Botón de acción `text`, `icon`

**Buttons** Tool Button Botón con icono `icon`, `toolButtonStyle`

**Buttons** Radio Button Selección única `checked`, `text`

**Buttons** Check Box Selección múltiple `checked`, `text`

**Buttons** Command Link Button Botón con título+descripción `text`, `description`

**Buttons** Dialog Button Box Botones estándar de diálogo `standardButtons`

**Input** Line Edit Texto de una línea `text`, `placeholderText`

**Input** Text Edit Texto multilínea con formato `html`

**Input** Plain Text Edit Texto multilínea sin formato `plainText`

**Input** Combo Box Lista desplegable `currentText`

**Input** Font Combo Box Selector de fuentes `currentFont`

**Input** Spin Box Número entero `value`, `minimum`, `maximum`

**Input** Double Spin Box Número decimal `value`, `decimals`

**Input** Time Edit Selector de hora `time`

**Input** Date Edit Selector de fecha `date`

**Input** Date/Time Edit Selector fecha+hora `dateTime`

**Input** Dial Control giratorio `value`

**Input** HSlider / VSlider Deslizador `value`, `minimum`, `maximum`

**Input** Key Sequence Edit Capturar atajos `keySequence`

**Items** List Widget Lista de elementos `currentRow`

**Items** Tree Widget Árbol jerárquico `columnCount`

**Items** Table Widget Tabla de datos `rowCount`, `columnCount`

---

Ejercicio Práctico del Módulo

🏋️ EJERCICIO 3: Tarjeta de Perfil de Usuario

>

Objetivo: Crear una tarjeta de perfil de usuario visual usando múltiples tipos de widgets.

>

Pasos:

1. Crea un Dialog sin botones de 450x400 píxeles

2. Cambia el windowTitle a "Perfil de Usuario"

3. Cambia el fondo del Dialog: styleSheet: background-color: #1a1a2e;

4. Agrega un Label grande para el título "Mi Perfil" (fuente 20pt, blanco, centrado)

5. Agrega un Label con texto "Nombre:" (fuente 12pt, color gris claro)

6. Agrega un Line Edit con placeholder "Escribe tu nombre completo"

7. Agrega un Label con texto "Especialidad:"

8. Agrega un Combo Box con opciones: "Diseñador", "Ilustrador", "Fotógrafo", "Animador", "Otro"

9. Agrega un Label con texto "Años de experiencia:"

10. Agrega un Spin Box (min: 0, max: 50, suffix: " años")

11. Agrega un Label con texto "Disponibilidad:"

12. Agrega dos Check Boxes: "Disponible para freelance" y "Busco empleo fijo"

13. Agrega un Label con texto "Nivel de satisfacción:"

14. Agrega un Horizontal Slider (min: 1, max: 10)

15. Agrega un LCD Number al lado del slider para mostrar el valor (digitCount: 2)

16. Agrega un Label con texto "Sobre mí:"

17. Agrega un Plain Text Edit con placeholder "Cuéntanos sobre ti..."

18. Agrega un Push Button con texto "Guardar Perfil" (estilizado con fondo verde)

19. Renombra TODOS los widgets con nombres descriptivos

20. Guarda como tarjeta_perfil.ui

21. Presiona Ctrl+R para ver la vista previa

>

Resultado esperado: Un formulario de perfil de usuario completo con campos de texto, selectores, slider y botón de guardar, todo con fondo oscuro.

---

Recursos Adicionales

Recurso Descripción

--------- -------------

[Qt Widgets Index](https://doc.qt.io/qt-6/qtwidgets-index.html) Índice completo de widgets con enlaces a documentación

[Qt Style Sheets Examples](https://doc.qt.io/qt-6/stylesheet-examples.html) Ejemplos de estilos para cada widget

[Material Icons](https://fonts.google.com/icons) Iconos gratuitos para botones

[Feather Icons](https://feathericons.com) Iconos SVG limpios y minimalistas

---

Evaluación de Comprensión

¿Qué widget usarías para mostrar el nombre de un usuario? ¿Y para que el usuario lo edite?

¿Cuál es la diferencia entre un Radio Button y un Check Box? ¿Cuándo usarías cada uno?

¿Qué propiedad del Line Edit usarías para mostrar texto de sugerencia cuando el campo está vacío?

¿Cómo harías para que un Label muestre texto en negrita y de color rojo?

¿Qué widget usarías para que el usuario seleccione su fecha de nacimiento?

¿Cuál es la diferencia entre Text Edit y Plain Text Edit?

¿Qué widget es similar a una hoja de Excel?

¿Qué propiedad del Spin Box usarías para agregar un símbolo de moneda antes del número?

¿Cómo agrupas Radio Buttons para que solo uno pueda estar seleccionado a la vez?

¿Qué widget usarías para mostrar una lista de canciones seleccionables?

---

Módulo anterior: ← [Módulo 2: Tu Primera Interfaz](01-primera-interfaz.md)

Siguiente módulo: → [Módulo 4: Contenedores](03-contenedores.md)

📝 Evaluación de Comprensión
Escribe tus respuestas y luego presiona el botón para comparar con las respuestas correctas.
1. ¿Qué widget usarías para mostrar el nombre de un usuario? ¿Y para que el usuario lo edite?
✅ Respuesta Correcta
Para mostrar: Label. Para que lo edite: Line Edit.
2. ¿Cuál es la diferencia entre un Radio Button y un Check Box? ¿Cuándo usarías cada uno?
✅ Respuesta Correcta
Radio Button permite selección única (solo uno activo a la vez dentro del mismo grupo), como elegir tamaño de pizza. Check Box permite selección múltiple (varios activos al mismo tiempo), como elegir toppings de pizza.
3. ¿Qué propiedad del Line Edit usarías para mostrar texto de sugerencia cuando el campo está vacío?
✅ Respuesta Correcta
placeholderText
4. ¿Cómo harías para que un Label muestre texto en negrita y de color rojo?
✅ Respuesta Correcta
Usando HTML en la propiedad text: Texto, o cambiando la propiedad font a negrita y aplicando styleSheet: color: red;
5. ¿Qué widget usarías para que el usuario seleccione su fecha de nacimiento?
✅ Respuesta Correcta
Date Edit (o Calendar Widget para una selección visual más completa).
6. ¿Cuál es la diferencia entre Text Edit y Plain Text Edit?
✅ Respuesta Correcta
Text Edit es un editor de texto multilínea con formato (negrita, cursiva, colores, HTML). Plain Text Edit es un editor de texto multilínea sin formato (texto plano).
7. ¿Qué widget es similar a una hoja de Excel?
✅ Respuesta Correcta
Table Widget.
8. ¿Qué propiedad del Spin Box usarías para agregar un símbolo de moneda antes del número?
✅ Respuesta Correcta
La propiedad 'prefix'.
9. ¿Cómo agrupas Radio Buttons para que solo uno pueda estar seleccionado a la vez?
✅ Respuesta Correcta
Colocándolos dentro del mismo contenedor (Group Box, Frame o Widget). Solo uno podrá estar seleccionado a la vez dentro del mismo contenedor.
10. ¿Qué widget usarías para mostrar una lista de canciones seleccionables?
✅ Respuesta Correcta
List Widget.

🏋️ Ejercicio Práctico
Ejercicio 3: Tarjeta de Perfil de Usuario

Módulo 3: Widgets Básicos

---

Objetivo

Crear una tarjeta de perfil de usuario visual usando múltiples tipos de widgets.

---

Instrucciones

Crea un Dialog sin botones de 450x400 píxeles

windowTitle: "Perfil de Usuario"

Fondo del Dialog: styleSheet: background-color: #1a1a2e;

Label título: "Mi Perfil" (20pt, blanco, centrado)

Label "Nombre:" + Line Edit (placeholder: "Escribe tu nombre completo")

Label "Especialidad:" + Combo Box (Diseñador, Ilustrador, Fotógrafo, Animador, Otro)

Label "Años de experiencia:" + Spin Box (min: 0, max: 50, suffix: " años")

Label "Disponibilidad:" + 2 Check Boxes ("Disponible para freelance", "Busco empleo fijo")

Label "Nivel de satisfacción:" + Horizontal Slider (min: 1, max: 10)

LCD Number al lado del slider (digitCount: 2)

Label "Sobre mí:" + Plain Text Edit (placeholder: "Cuéntanos sobre ti...")

Push Button "Guardar Perfil" (estilizado con fondo verde)

Renombra TODOS los widgets

Guarda como tarjeta_perfil.ui

Presiona Ctrl+R para verificar

---

Resultado Esperado

Un formulario de perfil completo con campos de texto, selectores, slider con display numérico y botón de guardar, todo con fondo oscuro.

---

Checklist

[ ] Dialog de 450x400 con fondo oscuro

[ ] Label de título grande y centrado

[ ] Line Edit con placeholder

[ ] Combo Box con 5 opciones

[ ] Spin Box con suffix "años"

[ ] 2 Check Boxes

[ ] Slider + LCD Number

[ ] Plain Text Edit con placeholder

[ ] Botón estilizado en verde

[ ] Todos los widgets renombrados

Anterior: Módulo 2 Siguiente: Módulo 4

Propiedad	Descripción
-----------	-------------
html	Contenido HTML completo
readOnly	Siempre es de solo lectura
openExternalLinks	Si los links externos se abren en el navegador

Propiedad	Descripción
-----------	-------------
selectedDate	La fecha seleccionada actualmente
minimumDate / maximumDate	Rango de fechas permitidas
gridVisible	Mostrar u ocultar la cuadrícula
horizontalHeaderFormat	Formato del encabezado horizontal
verticalHeaderFormat	Formato del encabezado vertical
firstDayOfWeek	Primer día de la semana (Lunes, Domingo, etc.)

Propiedad	Descripción
-----------	-------------
frameShape	HLine (horizontal) o VLine (vertical)
frameShadow	Plain, Raised, Sunken

Propiedad	Descripción
-----------	-------------
icon	Icono principal
text	Texto opcional
toolButtonStyle	Cómo mostrar icono y texto (IconOnly, TextOnly, TextBesideIcon, TextUnderIcon)
autoRaise	Se eleva solo al pasar el mouse
popupMode	DelayedPopup, MenuButtonPopup, InstantPopup

Botón	Rol	Cuándo aparece
-------	-----	----------------
Ok	AcceptRole	Confirmar acción
Cancel	RejectRole	Cancelar acción
Save	AcceptRole	Guardar cambios
Discard	DestructiveRole	Descartar cambios
Apply	ApplyRole	Aplicar cambios sin cerrar
Reset	ResetRole	Restaurar valores originales
Help	HelpRole	Abrir ayuda
Yes / No	YesRole / NoRole	Respuestas a preguntas

Propiedad	Descripción
-----------	-------------
plainText	El contenido como texto plano
readOnly	Si es de solo lectura
placeholderText	Texto cuando está vacío
tabStopDistance	Distancia de tabulación

Propiedad	Descripción
-----------	-------------
currentText	Texto de la opción seleccionada
currentIndex	Índice de la opción seleccionada (0 = primera)
editable	Si el usuario puede escribir su propia opción
maxVisibleItems	Máximo de items visibles en la lista desplegable
insertPolicy	Cómo se insertan nuevos items

Widget	Formato por defecto	Uso típico
--------	-------------------	------------
Time Edit	`HH:mm`	Programar una cita
Date Edit	`yyyy-MM-dd`	Fecha de nacimiento
Date/Time Edit	`yyyy-MM-dd HH:mm`	Programar evento

Propiedad	Descripción
-----------	-------------
displayFormat	Formato de visualización
minimumDate / maximumDate	Rango de fechas permitidas
calendarPopup	Mostrar calendario desplegable (Date Edit)

Propiedad	Descripción
-----------	-------------
value	Valor actual
minimum / maximum	Rango de valores
notchesVisible	Mostrar marcas de referencia
notchTarget	Distancia entre marcas
wrapping	Si el valor se envuelve al llegar al máximo

Propiedad	Descripción
-----------	-------------
keySequence	La combinación de teclas capturada

Propiedad	Descripción
-----------	-------------
currentRow	Fila seleccionada actualmente
selectionMode	SingleSelection, MultiSelection, ExtendedSelection
viewMode	ListMode (lista) o IconMode (iconos)
movement	Si los items se pueden mover (Static, Free, Snap)
spacing	Espacio entre items
gridSize	Tamaño de la cuadrícula (en modo IconMode)

Propiedad	Descripción
-----------	-------------
columnCount	Número de columnas
headerLabels	Textos de los encabezados de columna
headerVisible	Mostrar u ocultar encabezados
indentation	Sangría entre niveles
animated	Animar expandir/colapsar
itemsExpandable	Si los items se pueden expandir

Propiedad	Descripción
-----------	-------------
rowCount	Número de filas
columnCount	Número de columnas
horizontalHeaderLabels	Encabezados de columnas
verticalHeaderLabels	Encabezados de filas
showGrid	Mostrar líneas de cuadrícula
sortingEnabled	Permitir ordenar por columna
editTriggers	Cuándo se pueden editar las celdas

Recurso	Descripción
---------	-------------
[Qt Widgets Index](https://doc.qt.io/qt-6/qtwidgets-index.html)	Índice completo de widgets con enlaces a documentación
[Qt Style Sheets Examples](https://doc.qt.io/qt-6/stylesheet-examples.html)	Ejemplos de estilos para cada widget
[Material Icons](https://fonts.google.com/icons)	Iconos gratuitos para botones
[Feather Icons](https://feathericons.com)	Iconos SVG limpios y minimalistas