Qt Introducción a los Estilos CSS

El framework Qt nos facilita las tareas de creación de estilo y diseño de nuestras aplicaciones por medio de CSS, aunque existen pequeñas diferencias la mayoría de los conceptos de la especificación CSS 2.0 se pueden aplicar en Qt, podremos cambiar el estilo de un widget cambiando sus propiedades, usaremos los selectores para determinar ha cuál de los elementos deseamos estilizar, veamos como se hace.

Para este tutorial vamos a crear una GUI utilizando el diseñador, el diseño no es lo importante, lo que nos interesa en el procedimiento requerido para aplicar los estilos a nuestra aplicación, primero creamos un proyecto y añadimos el siguiente formulario:

Para comenzar a editar los estilos, hacemos clic derecho sobre la clase principal, y seleccionamos la opción Change styleSheet…

Al seleccionar la opción indicada se muestra la siguiente ventana en donde podemos agregar el código de diseño, esta ventana nos proporciona botones para agregar estilos de manera más rápida, utilizando los asistentes.

Vemos ahora como utilizar los diversos selectores para aplicar los estilos a los widgets deseados, lo primero que cambiaremos será el estilos a los botones, veamos como se hace:

QPushButton {
 border: 2px solid whitesmoke;
 border-radius: 5px;
 background-color: rgb(170, 170, 0);
 padding: 10px;
 margin: 10px;
}

El selector QPushButton corresponde al nombre de la clase que represente dicho widget, con esto le cambiamos el estilo a todos los botones presentes en nuestra GUI, debemos indicar el nombre de la propiedad que deseamos modificar seguido de : y luego el nuevo valor de la propiedad, esto es CSS 2.0.

De un modo similar podemos establecer el estilo del botón cuando el ratón esté sobre él, para ello usaremos la pseudo clase hover, por ejemplo, para cambiar el color de fondo si el ratón está sobre el botón:

QPushButton:hover {
 background-color: rgb(170, 170, 150);
}

Existes más pseudo clases, por ejemplo checked para el control QRadioButton nos servirá para cambiar el estilo al que este seleccionado, dependiendo del widget del que se trate pueden existir muchas más de ellas, las veremos más adelante en próximos tutoriales, por ahora tenemos lo siguiente:

Si tenemos varios widgets del mismo tipo y deseamos aplicar un estilo a solo uno de ellos, podemos hacer referencia al mismo usando su ID o nombre identificador, por ejemplo, para cambiar el color de fondo al widget llamado centralWidget hacemos los siguiente:

QWidget#centralWidget {
 background-color: qconicalgradient(cx:0, cy:1, angle:182.4, 
          stop:0 rgba(0, 0, 0, 255), 
          stop:1 rgba(255, 255, 255, 255));
}

Este gradiente de fondo fue creado con el asistente, lo seleccionas con el botón Add Gradient y presionando la propiedad a la que deseas aplicar el mismo.

Otro ejemplo, cambiar el estilo para el QLabel que representa el titulo de nuestra aplicación, el mismo se llama lblTitle.

QLabel#lblTitle {
 font: 25 16pt "Segoe UI Light";
 color: whitesmoke;
}

Con estos cambios la aplicación se ve de la siguiente manera:

Una opción interesante es usar el selector universal, el símbolo * este nos permitirá aplicar los estilos a todos los widgets presentes en nuestra GUI, veamos un ejemplo:

* {
     font: 57 10pt "Roboto";
}

Esto cambia la fuente que se aplica a nuestra interfaz, para facilitar el trabajo usa el asistente que aparece al presionar el botón Add Font el mismo te permitirá seleccionar la fuente, estilo y tamaño de la misma.

Aplicando lo que hemos aprendido, modificamos el estilo para que nuestra aplicación quede de este modo:

Para finalizar debemos mencionar que existe otro tipo de selector, con este podemos aplicar un estilo a un widget cuya propiedad tenga el valor indicado, por ejemplo, si desearemos aplicar un estilo a un QPushButton cuya propiedad text es igual a "soy btn" haríamos lo siguiente:

QPushButton[text='soy btn'] {
   color: red;
}

No es el mejor diseño, pero la idea es demostrar lo que se puede hacer, seguramente alguien con más creatividad podrá hacer algo mucho mejor, lo interesante es que nos hay que aprender cosas nuevas, tus conocimientos de CSS 2.0 se aplican perfectamente.

Descargar proyecto: estilos-qss.zip