PyQT 5 Estilos QSS

Qt Style Sheets (QSS) es un lenguaje diseñado para cambiar la apariencia de las interfaces gráficas de usuario diseñadas con Qt, está basado en las hojas de estilos en cascada (CSS), son muy similares, por lo que, si ya conoces CSS empezar a utilizar QSS será muy fácil.

Qt Style Sheets: QLineEdit { color: red; background-color: white; }

Este es código QSS, como vemos es bastante similar a CSS, en primer lugar tenemos un selector, QLineEdit, este permite especificar a que elemento se aplicara el estilo, al igual que en CSS2 contamos con diversos tipos de selectores, seguido, entre llaves “{ … }” ubicamos la definición del estilo, indicamos el nombre de la propiedad que deseamos cambiar y el nuevo valor de la misma, usamos “ : ” para separar la propiedad y su valor, finalizamos con “ ; ”.  

En este ejemplo de código cambiamos la apariencia de los widgets QLineEdit, cambiamos su color de texto color: red; y su color de fondo background-color: white;, existen muchas otras propiedades que podemos modificar a nuestro gusto.  

Aplicar QSS a PyQT

Existen dos formas de aplicar el estilo, primero podemos aplicar un estilo directamente al widget deseado, ejemplo: lineEdit.setStyleSheet("color: red; background-color: white;"), aplicamos los estilos al control de tipo QLineEdit llamado lineEdit, no es necesario indicar el selector por obvias razones.

La segunda forma es crear un archivo QSS externo que luego será añadido a la aplicación,  este es un archivo de texto plano que contiene todos los estilos deseados, para aplicarlo solo leemos el archivo, guardamos el una variable tipo cadena y luego usamos el siguiente código: QApplication.instance().setStyleSheet(estilo), estilo es la variable donde se almacena el contenido del archivo QSS.

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QPushButton

if __name__ == '__main__':
    app = QApplication(sys.argv)

    w = QWidget()
    w.setWindowTitle('QSS Styles PyQT-5')

    btn = QPushButton('Este es un Button con estilo QSS', w)
    btn.move(50, 50)

    btn1 = QPushButton('El estilo es para todos los QPushButton', w)
    btn1.move(50, 100)

    btn2 = QPushButton('QPushButton con estilo individual', w)
    btn2.setStyleSheet("background-color: green; color: white;")
    btn2.move(50, 150)

    stl = """QPushButton {
        background-color: palegoldenrod;
        border-width: 2px;
        border-color: darkkhaki;
        border-style: solid;
        border-radius: 5;
        padding: 3px;
        min-width: 9ex;
        min-height: 2.5ex;
    }"""

    QApplication.instance().setStyleSheet(stl)
    w.show()
    sys.exit(app.exec_())

Aplicar QSS con el diseñador QT Designer

El diseñador Qt Designer nos provee de herramientas que nos facilitan la creación de hojas de estilo QSS, veamos como utilizarlo, arrancamos el diseñador y creamos un nuevo proyecto vacío.

Agregamos un widget cualquiera, hacemos clic derecho sobre él y pulsamos la opción, change StyleSheet…, aparecerá el siguiente cuadro:

Usamos los botones ubicados en la parte superior para seleccionar la propiedad que deseamos cambiar, al pulsar sobre ella nos aparece otro dialogo donde podremos establecer el nuevo valor de la propiedad, ejemplo: si seleccionamos color en la lista mostrada por Add Color nos aparece el cuadro para seleccionar el color deseado.

A medida que vamos editando las propiedades deseadas, la ventana nos muestra el código generado, al terminar presionamos Apply para aplicar los cambios y ver el resultado.

Podemos ver en la esquina inferior derecha en color verde el mensaje “Valid Style Sheet” el mismo nos indica que el código qss es correcto.

Selectores QSS

Los selectores nos permiten establecer a que widget se le aplicará un determinado estilo, si hacemos clic derecho sobre un área vacía de la ventana que estemos creando y pulsamos la opción  change styleSheet… podremos editar el estilo de todos los widgets que contiene la misma.

Al presionar Apply veremos que cambia el color y fuente del texto de todos los widgets que contiene la ventana, para indicar a que tipo de widget se le aplicará este estilo solo debemos indicarlo al principio de la definición del estilo.

Vemos como podemos definir un estilo diferente para cada uno de los widget: QLabel, QLineEdit y QPushButton, entre llaves establecemos los nuevos valores.

Podemos ser mas específicos al aplicar un estilo, indicando el id del widget el estilo solo será aplicado al widget con este id.

El primer estilo es aplicado a todos los QPushButton mientras que el segundo es aplicado solo a QPushButton llamado aceptar, podemos indicar solamente el id sin necesidad de usar el tipo, ejemplo #apectar { … } también es válido.

El selector * “Selector Universal” nos permite aplicar el estilo a todos los widgets, su uso es sencillo, ejemplo: *{ color: red; … }.