Widgets

PRESENTACIÓN

Widgets

En PyQt

Integrantes:Anette Guadalupe Abarca Ruiz Karol Amarelys Torres Medina Hector David Romo Galvan

¿Qué es QVBoxLayout?

¿QVBoxLayout (Vertical Layout) es un administrador de diseño en PyQt que organiza los widgets de arriba hacia abajo dentro de una ventana o contenedor. Se adapta automáticamente al tamaño de la ventana, manteniendo la alineación y proporción de los elementos sin necesidad de posiciones fijas.

Info

Conceptos

Errores

¿Qué es QHBoxLayout?

QHBoxLayout (Horizontal Layout) es un administrador de diseño en PyQt que organiza los widgets de izquierda a derecha dentro de un contenedor.Permite crear barras de botones, encabezados o secciones horizontales que se adaptan automáticamente al tamaño de la ventana.

Info

Conceptos

Errores

¿Qué es QGridLayout?

QGridLayout es un administrador de diseño en forma de cuadrícula (filas y columnas) que organiza widgets dentro de una matriz. Cada elemento ocupa una celda, y puede fusionar celdas para ajustar su tamaño o posición (por ejemplo, addWidget(widget, fila, columna, filas_ocupadas, columnas_ocupadas)).

Info

Conceptos

Errores

¿Qué es QFormLayout?

QFormLayout es un layout diseñado para formularios, donde cada fila contiene una etiqueta y un campo de entrada (por ejemplo, “Nombre:” y un QLineEdit). Organiza automáticamente los pares en dos columnas y ajusta el espaciado de forma uniforme.

Info

Conceptos

Errores

¿Qué es Horizontal Spacer?

El Horizontal Spacer es un espaciador horizontal usado en PyQt para crear separación flexible entre widgets colocados en un QHBoxLayout o dentro de otro layout. Actúa como un “resorte” que empuja los elementos hacia los lados cuando el contenedor se agranda.

Info

Conceptos

Errores

¿Qué es Vertical Spacer?

El Vertical Spacer es un espaciador vertical utilizado en PyQt para crear separación flexible entre widgets apilados en un QVBoxLayout u otro layout vertical. Su función es absorber el espacio libre y mantener los widgets alineados correctamente de arriba a abajo.

vDer.addSpacerItem(QSpacerItem(20, 20, QSizePolicy.Minimum, QSizePolicy.Expanding))

Vertical spacer mantiene el calendario arriba y empuja la ayuda abajo.

Conceptos

Errores

¿Qué es QFrame?

QFrame es un contenedor visual en PyQt que permite agrupar widgets o secciones dentro de una interfaz. Puede mostrar bordes, líneas o paneles decorativos, ayudando a dividir y organizar visualmente la ventana.

Info

Conceptos

Errores

¿ Qué es Qt Style Sheets?

Los Qt Style Sheets (QSS) son un sistema de estilos visuales similar al CSS de las páginas web. Sirven para personalizar la apariencia de los widgets en PyQt: colores, bordes, tipografía, fondos y estados (hover, pressed, etc.).

Conceptos

Errores

Info

¿Qué es QShortcut?

QShortcut es un objeto que crea atajos de teclado en PyQt. Permite ejecutar una acción específica cuando el usuario presiona una combinación de teclas, como Ctrl+S para guardar o Esc para cerrar una ventana.

Info

Conceptos

Errores

¿Qué son los Buttons en PyQt?

Los Buttons (botones) son widgets interactivos que permiten al usuario ejecutar acciones dentro de una interfaz gráfica, como guardar datos, salir del programa o abrir ventanas.Incluyen varias variantes como QPushButton, QRadioButton y QCheckBox.

QPushButton

QRadioButton

Conceptos

Errores

¿ Qué es QCheckBox?

QCheckBox es un botón de selección múltiple en PyQt que permite activar o desactivar opciones independientes.A diferencia del QRadioButton, varios QCheckBox pueden estar marcados al mismo tiempo.

Info

Conceptos

Errores

¿Qué es QLabel?

QLabel es un widget para mostrar texto o imágenes en PyQt. Se usa para colocar títulos, descripciones, íconos o cualquier tipo de información que no requiere interacción directa del usuario.

Info

Conceptos

Errores

¿ Qué es QCalendarWidget?

QCalendarWidget es un widget de calendario interactivo en PyQt que permite al usuario ver y seleccionar fechas fácilmente. Se usa en formularios, agendas, sistemas de reservas o cualquier aplicación que necesite manejar fechas visualmente.

Info

Conceptos

Errores

Resultado Final

Los widgets utilizados permitieron diseñar una interfaz gráfica clara, funcional y organizada. Cada componente cumplió un rol específico: los layouts estructuraron la ventana, los botones y opciones facilitaron la interacción del usuario, y elementos como QLabel, QFrame y QCalendarWidget mejoraron la presentación y usabilidad. Además, el uso de Qt Style Sheets y QShortcut aportó un diseño más profesional y eficiente. En conjunto, estos widgets demostraron la versatilidad de PyQt para crear aplicaciones intuitivas y visualmente atractivas. En conclusión, el conjunto de estos widgets demuestra que PyQt es una herramienta poderosa para construir interfaces gráficas completas, intuitivas y con diseño profesional, permitiendo al desarrollador crear aplicaciones claras, ordenadas y enfocadas en la experiencia del usuario.

Conclusión

Bibliografía

Riverbank Computing. (2024). PyQt5 Reference Guide. Recuperado de:

The Qt Company. (2024). Qt for Python Documentation (PySide6) – Widgets and Layouts. Recuperado de:

ZetCode. (2023). PyQt5 Tutorial – Layouts, Widgets and GUI Basics. Recuperado de:

Link para código

💡 3 conceptos clave Distribución lineal → Coloca los widgets en una sola fila, ajustando automáticamente su ancho según el espacio disponible. Espaciadores y alineación → Puedes usar addStretch() o QSpacerItem para separar elementos y alignment para alinear a izquierda, centro o derecha. Layouts anidados → Puede combinarse dentro de un QVBoxLayout para crear estructuras más complejas (por ejemplo, una barra de botones dentro de una interfaz vertical).

💡 3 conceptos clave Jerarquía y propiedad → El layout pertenece a un contenedor (QWidget) y controla la posición de todos los widgets agregados. Espaciado y estiramiento → Puedes ajustar márgenes, separación entre widgets y cuánto crece cada elemento con addStretch() o setStretch(). Política de tamaño (QSizePolicy) → Define si un widget debe expandirse o mantenerse fijo cuando la ventana cambia de tamaño.

⚠️ Errores comunes ❌ No aplicar el layout al contenedor: sin setLayout(hbox), los widgets no se ordenan. ❌ Usar widgets sin márgenes ni spacing: puede hacer que se vean amontonados. ❌ No usar QSizePolicy o stretch: los botones o campos pueden quedar con tamaños desiguales o sin ocupar todo el espacio.

⚠️ Errores comunes ❌ No aplicar el layout al contenedor: si no haces setLayout(layout), los widgets no se muestran correctamente. ❌ Usar posiciones fijas (move, setGeometry): rompe la adaptabilidad del layout. ❌ No configurar políticas ni stretch: algunos widgets se verán “pegados” o no se ajustarán al espacio disponible.

💡3 conceptos clave Estructura tabular → Permite alinear campos y etiquetas como en una tabla (útil para formularios complejos). Control de expansión → Cada celda puede expandirse o mantenerse fija según el QSizePolicy y el stretch de filas/columnas. Anidamiento flexible → Puede combinarse dentro de otros layouts (por ejemplo, un QGridLayout dentro de un QVBoxLayout).

⚠️ Errores comunes ❌ Repetir índices de fila o columna: puede sobreescribir widgets y causar desorden. ❌ No definir proporciones de expansión: sin setRowStretch o setColumnStretch, el contenido puede desalinearse. ❌ Combinarlo con posiciones fijas (move) → rompe la estructura dinámica del layout.

⚠️ Errores comunes ❌ Usar más de dos widgets por fila: rompe la alineación automática del formulario. ❌ No definir tamaños o políticas (QSizePolicy): algunos campos pueden verse demasiado pequeños o desiguales. ❌ Intentar mover widgets manualmente (move, geometry) → interfiere con el comportamiento del layout.

💡3 conceptos clave Estructura por pares → Cada fila es una pareja “Etiqueta : Widget”, ideal para datos de usuario, configuración o registro. Flexibilidad de alineación → Permite ubicar las etiquetas arriba o al costado con setFormAlignment() y setLabelAlignment(). Integración sencilla → Puede colocarse dentro de un QVBoxLayout o QFrame para crear secciones de entrada limpias y ordenadas.

⚠️ Errores comunes ❌ Colocarlo fuera de un layout: no tendrá ningún efecto visual. ❌ Usar muchos espaciadores seguidos: puede generar separaciones desiguales o vacíos excesivos. ❌ Confundirlo con un margen fijo: el espaciador se adapta, mientras que los márgenes tienen tamaño constante.

💡3 conceptos clave Espacio adaptable → Su tamaño aumenta o disminuye automáticamente según el espacio disponible. Control de alineación → Se usa para alinear widgets a la izquierda, al centro o a la derecha dentro de un layout. Propiedades ajustables → Puede configurarse su política (Expanding o Minimum) para definir cuánto se estira.

💡3 conceptos clave Espacio adaptable → Se expande o contrae automáticamente según el tamaño de la ventana. Control de posición → Permite empujar elementos hacia arriba, centro o abajo dentro del contenedor. Configuración dinámica → Se ajusta con políticas de tamaño (QSizePolicy.Expanding) para controlar cuánto crece.

⚠️ Errores comunes❌ Insertarlo fuera de un layout: no surtirá efecto visual. ❌ Poner varios sin control: puede crear grandes vacíos y desalinear el contenido. ❌ Usarlo en lugar de márgenes: los márgenes son fijos, los espaciadores son flexibles.

Empuja el botón “Cerrar” a la derecha Se expande según el tamaño de la ventana Mantiene los botones alineados correctamente

💡3 conceptos clave Contenedor estructural → Se usa para agrupar widgets relacionados, como un panel de opciones o una sección de formulario. Estilos configurables → Propiedades como frameShape (Box, Panel, HLine, VLine) y frameShadow (Raised, Sunken) cambian su aspecto. Versatilidad visual → Puede combinarse con Style Sheets (CSS) para personalizar bordes, colores o fondos.

⚠️ Errores comunes❌ Usarlo sin layout interno: si no contiene un layout (setLayout), los widgets dentro no se organizan correctamente. ❌ Confundirlo con un Label o Widget normal: su propósito es organizar o separar, no mostrar texto directamente. ❌ Dejar valores por defecto: sin configurar el tipo de marco, el QFrame puede parecer invisible o sin efecto.

⚠️ Errores comunes ❌ Usar nombres de propiedad erróneos: Qt no reconoce todas las propiedades CSS (usa solo las compatibles). ❌ No usar identificadores (objectName) cuando se necesita aplicar un estilo a un widget concreto. ❌ Aplicar estilos en exceso: demasiadas reglas pueden volver la interfaz más lenta o inconsistente visualmente.

💡3 conceptos clave Sintaxis tipo CSS → Usa selectores (QPushButton, QLabel#titulo, etc.) para aplicar estilos a widgets específicos. Jerarquía de aplicación → Los estilos pueden aplicarse a un widget, a un contenedor completo o a toda la aplicación. Estados dinámicos → Permite definir estilos diferentes según la interacción del usuario (hover, checked, disabled).

💡3 conceptos claveAsociación directa → Se vincula a un widget o ventana y activa una función cuando se detecta la combinación asignada. Fácil implementación → Se crea con QShortcut(QKeySequence("Ctrl+S"), self) y se conecta con una función (activated.connect(...)). Optimiza la usabilidad → Mejora la velocidad de interacción del usuario sin depender de clics o botones.

⚠️ Errores comunes ❌ Asignar un atajo ya usado por el sistema o PyQt: puede generar conflictos o no funcionar. ❌ No mantener referencia al objeto QShortcut: si se crea localmente sin guardarlo, se destruye y deja de funcionar. ❌ Olvidar conectar la señal activated: el atajo no hará nada sin enlazarlo a una acción o función.

💡3 conceptos claveInteracción del usuario → Detectan clics y envían señales (clicked, toggled) que pueden conectarse a funciones. Personalización visual → Pueden mostrar texto, íconos, colores y estados (normal, presionado, deshabilitado). Tipos de botones → PushButton: acción directa (guardar, enviar). RadioButton: opción exclusiva. CheckBox: opción independiente.

⚠️ Errores comunes ❌ No conectar la señal clicked: el botón no ejecutará ninguna acción. ❌ Usar RadioButtons sin agrupar: permitirá seleccionar más de una opción cuando deberían ser exclusivas. ❌ Sobrecargar la interfaz con muchos botones: puede confundir al usuario o romper la estructura visual.

Los QPushButton ejecutan acciones al hacer clic, como guardar, limpiar o cerrar la ventana.

Los QRadioButton permiten elegir una sola opción entre varias, en este caso el modo de registro.

💡3 conceptos claveSelección independiente → Cada casilla funciona de forma autónoma (encendida/apagada). Estados del checkbox → Puede tener 2 o 3 estados (checked, unchecked, partially checked). Lectura de estado → Se controla con .isChecked() y se cambia con .setChecked(True/False).

⚠️ Errores comunes ❌ No leer el estado antes de procesar datos: puede no reflejar la selección del usuario. ❌ Confundirlo con QRadioButton: el CheckBox no es exclusivo, se pueden marcar varios. ❌ Olvidar el texto descriptivo: sin etiqueta, el usuario no sabrá qué opción activa o desactiva.

💡3 conceptos claveContenido estático o dinámico → Puede mostrar texto fijo o actualizarse en tiempo real con .setText(). Soporte de formato → Acepta HTML básico y Rich Text (negritas, colores, saltos de línea, etc.). Versatilidad visual → Permite mostrar imágenes (setPixmap) y aplicar estilos con Qt Style Sheets.

⚠️ Errores comunes ❌ Intentar capturar clics: QLabel no genera eventos de clic a menos que se le habilite explícitamente (setTextInteractionFlags o mousePressEvent). ❌ No ajustar tamaño (setWordWrap(True)): el texto puede cortarse si es largo. ❌ Usar para entrada de datos: es solo de salida, no editable como un QLineEdit.

💡3 conceptos claveSelección de fechas → El usuario puede elegir una fecha con el mouse; se obtiene con .selectedDate() y se establece con .setSelectedDate(). Personalización visual → Permite cambiar colores, formato de encabezado, fuente y mostrar semanas mediante Qt Style Sheets o propiedades. Eventos y señales → Envía la señal selectionChanged() cuando el usuario cambia de día, ideal para actualizar campos de texto o etiquetas automáticamente.

⚠️ Errores comunes ❌ No conectar la señal selectionChanged: la interfaz no reaccionará al cambio de fecha. ❌ Tratarlo como un campo de texto: las fechas deben gestionarse con objetos QDate, no con strings comunes. ❌ Olvidar formato de salida (toString("dd/MM/yyyy")): puede mostrar fechas en un formato distinto al esperado.

El layout vertical agrega los siguientes elementos de arriba a abajo: Título Barra superior (Horizontal Layout) Separador (línea) Panel principal completo (Frame con contenido)

En esa parte del código, el layout horizontal se utiliza para acomodar el campo de búsqueda y los botones en una misma línea, colocándolos uno junto al otro. Gracias a este layout, todo queda alineado horizontalmente en la parte superior. Permite que el buscador quede a la izquierda y los botones inmediatamente a la derecha.

El QGridLayout organiza los widgets en una cuadrícula con filas y columnas. Aqui se alinean las etiquetas y sus opciones en la sección de ajustes, manteniendo una distribución clara y ordenada.

El QFormLayout organiza los campos del formulario en filas, colocando cada etiqueta junto a su caja de texto. Es ideal para formularios porque mantiene una estructura clara y fácil de entender para el usuario.

QFrame se usa como contenedor para agrupar widgets y crear paneles organizados dentro de la ventana.También permite aplicar bordes y estilos que mejoran la estructura visual de la interfaz.

Qt Style Sheets permiten dar estilo visual a los widgets, cambiando colores, bordes, fuentes y efectos como hover o click.Nosotros lo usamos para que los paneles, botones y cajas de texto luzcan modernos y mejor organizados.

QShortcut permite asignar atajos de teclado a acciones dentro de la aplicación.En el proyecto lo usamos como Ctrl+S guarda el registro y Esc cierra la ventana, sin usar el mouse.

El QCheckBox permite seleccionar opciones independientes que pueden activarse o desactivarse.En este proyecto se usa para decidir si el usuario quiere notificaciones y/o auto-guardado.

El QLabel muestra texto en la interfaz para identificar secciones o campos. En este proyecto se usa como título, etiquetas del formulario y descripciones para guiar al usuario.

El QCalendarWidget muestra un calendario interactivo para seleccionar fechas fácilmente.En este proyecto se usa para elegir la fecha de registro del usuario sin escribirla manualmente.