Tutorial de PyQt5 - Etiqueta

Jinku Hu 30 enero 2023
  1. Widget de etiqueta PyQt5
  2. PyQt5 QLabel Establecer fuente
  3. Alineación de etiquetas PyQt5
Tutorial de PyQt5 - Etiqueta

Aprenderemos a usar el widget de etiqueta PyQt5 QLabel en este tutorial.

Widget de etiqueta PyQt5

Vamos a añadir dos etiquetas a nuestra ventana, donde una de ellas contendrá algún texto y la otra una imagen.

import sys
from PyQt5 import QtWidgets, QtGui


def basicWindow():
    app = QtWidgets.QApplication(sys.argv)
    windowExample = QtWidgets.QWidget()
    labelA = QtWidgets.QLabel(windowExample)
    labelB = QtWidgets.QLabel(windowExample)
    labelA.setText("Label Example")
    labelB.setPixmap(QtGui.QPixmap("python.jpg"))
    windowExample.setWindowTitle("Label Example")
    windowExample.setGeometry(100, 100, 300, 200)
    labelA.move(100, 40)
    labelB.move(120, 120)
    windowExample.show()
    sys.exit(app.exec_())


basicWindow()

Donde,

labelA = QtWidgets.QLabel(w)

La primera etiqueta labelA es una QtWidgets.QtLabel y la QtWidgets- w está entre paréntesis porque le dice al programa que la etiqueta labelA se añade a la ventana w.

labelA.setText("Label Example")

labelA.setText establece el texto en la etiqueta.

windowExample.setGeometry(100, 100, 300, 200)

Establece el tamaño de la ventana en (300, 200) y la coordenada de la esquina superior izquierda en (100, 100). Puedes consultar la explicación de setGeometry en la última sección.

labelA.move(100, 40)
labelB.move(120, 120)

El método move() mueve la etiqueta en la dirección de la derecha y hacia abajo. Al igual que labelA.move(100, 40) mueve el labelA a la coordenada de (100, 40) relativa a la esquina superior izquierda de la ventana.

labelB.setPixmap(QtGui.QPixmap("globe.png"))

Muestra las imágenes en el labelB. QPixmap es el módulo de QtGui y toma una imagen de Qt.

Etiqueta PyQt5

PyQt5 QLabel Establecer fuente

En el ejemplo anterior, usamos la fuente por defecto en el widget de la etiqueta, y podrías especificar la fuente preferida como el tamaño, el peso y la familia de fuentes del texto de la etiqueta.

import sys
from PyQt5 import QtWidgets, QtGui


def basicWindow():
    app = QtWidgets.QApplication(sys.argv)
    windowExample = QtWidgets.QWidget()
    labelA = QtWidgets.QLabel(windowExample)
    labelB = QtWidgets.QLabel(windowExample)
    labelA.setText("Times Font")
    labelA.setFont(QtGui.QFont("Times", 12, QtGui.QFont.Bold))
    labelB.setText("Arial Font")
    labelB.setFont(QtGui.QFont("Arial", 14, QtGui.QFont.Black))
    windowExample.setWindowTitle("Label Example")
    windowExample.setGeometry(100, 100, 300, 200)
    labelA.move(100, 40)
    labelB.move(100, 120)
    windowExample.show()
    sys.exit(app.exec_())


basicWindow()
labelA.setFont(QtGui.QFont("Times", 12, QtGui.QFont.Bold))

El método setFont() establece la fuente de la etiqueta. La clase QFont especifica una fuente con atributos específicos.

Fuente del conjunto de etiquetas de PyQt5

Alineación de etiquetas PyQt5

El texto de la etiqueta está por defecto alineado al borde izquierdo, y esta propiedad puede ser modificada con el método QLabel.setAlignment().

import sys
from PyQt5 import QtWidgets, QtGui, QtCore


def basicWindow():
    app = QtWidgets.QApplication(sys.argv)
    windowExample = QtWidgets.QWidget()

    labelLeft = QtWidgets.QLabel(windowExample)
    labelRight = QtWidgets.QLabel(windowExample)
    labelCenter = QtWidgets.QLabel(windowExample)

    labelLeft.setText("Left Align")
    labelRight.setText("Right Align")
    labelCenter.setText("Center Align")

    windowExample.setWindowTitle("Label Align Example")
    windowExample.setGeometry(100, 100, 300, 200)

    labelLeft.setFixedWidth(160)
    labelRight.setFixedWidth(160)
    labelCenter.setFixedWidth(160)

    labelLeft.setStyleSheet("border-radius: 25px;border: 1px solid black;")
    labelRight.setStyleSheet("border-radius: 25px;border: 1px solid black;")
    labelCenter.setStyleSheet("border-radius: 25px;border: 1px solid black;")

    labelLeft.setAlignment(QtCore.Qt.AlignLeft)
    labelRight.setAlignment(QtCore.Qt.AlignRight)
    labelCenter.setAlignment(QtCore.Qt.AlignCenter)

    labelLeft.move(80, 40)
    labelRight.move(80, 80)
    labelCenter.move(80, 120)

    windowExample.show()
    sys.exit(app.exec_())


basicWindow()
labelLeft.setFixedWidth(160)
labelRight.setFixedWidth(160)
labelCenter.setFixedWidth(160)

Establece el ancho fijo de las tres etiquetas, en caso contrario, el ancho de la etiqueta se establece automáticamente de acuerdo con la longitud del texto de la etiqueta.

labelLeft.setStyleSheet("border-radius: 25px;border: 1px solid black;")

Podríamos usar una hoja de estilo similar a la de CSS para establecer los estilos de los widgets de PyQt5. Aquí, el borde de la etiqueta se establece en negro sólido con el borde de 1px, y el radio del borde se especifica como 25px.

labelLeft.setAlignment(QtCore.Qt.AlignLeft)
labelRight.setAlignment(QtCore.Qt.AlignRight)
labelCenter.setAlignment(QtCore.Qt.AlignCenter)

La propiedad de alineación del widget se establece por el método setAlignment y sus opciones están en el módulo PyQt5.QtCore.Qt, como

  • PyQt5.QtCore.Qt.AlignLeft
  • PyQt5.QtCore.Qt.AlignRight
  • PyQt5.QtCore.Qt.AlignCenter

Como se puede ver en la imagen de abajo, las etiquetas están alineadas de acuerdo a sus propiedades de alineación.

Alineación de etiquetas PyQt5

Autor: Jinku Hu
Jinku Hu avatar Jinku Hu avatar

Founder of DelftStack.com. Jinku has worked in the robotics and automotive industries for over 8 years. He sharpened his coding skills when he needed to do the automatic testing, data collection from remote servers and report creation from the endurance test. He is from an electrical/electronics engineering background but has expanded his interest to embedded electronics, embedded programming and front-/back-end programming.

LinkedIn Facebook