Estilizando suas aplicações com QSS – PySide6

Você já quis que seu painel de aplicativos de dados se parecesse com o famoso painel MBUX da Mercedes Benz?

Você sabia que os desenvolvedores usaram o framework Qt para criar seu design impressionante e lúcido?
Você pode fazer o mesmo ou até melhor. E o mais legal, você ficará surpreso com o quão fácil é.

Framework QT.

Os casos de uso do QT Framework (conheça as ligações Python PyQt e PySide) vão além de aplicativos de desktop, de dispositivos móveis, MCUs, IOT para dispositivos incorporados.
Como resultado, sua reputação aumenta e espalha a principal tecnologia independente por trás de milhões de dispositivos e aplicativos. Além disso, o QT está sendo usado em muitas indústrias, como eletrônica de consumo, automação, dispositivos médicos, automotivo e muito mais.
Um exemplo para todos, o Mercedes-Benz’s Premium Digital Cockpit UI nomeado MBUX é construído com Qt.

Mas como essas aplicações sao estilizadas?

Aplicativo sem estilo

Como exemplo para visualizarmos, usaremos a uma interface de login. Sem estilização, esta interface apareceria como mostrado abaixo.

Podemos ver alguns Widgets/Componentes (QLineEdit, QPushButton, etc…) dispostos no centro do formulário e aparentemente monótonos.
E sim, você está certo!!! Concordo que não é uma interface nem um pouco interessante. E nós vamos falar sobre como podemos melhorar isso agora.

Qt Style Sheets – (QSS)

Podemos personalizar Qt Widgets usando folhas de estilo. No entanto, é essencial perceber que Qt Style Sheet (QSS) para Qt Widgets não é o mesmo que Cascading Style Sheet (CSS) para HTML.

As folhas de estilo do Qt suportam várias propriedades, pseudo-estados e subcontroles para personalizar a aparência dos widgets.
Não se preocupe com a linguagem QSS. Se você tem pelo menos um conhecimento básico de CSS, você saberá imediatamente como trabalhar com o Qt Style Sheet.
Então, para nossa monótona interface de login adicionamos um código QSS, após alguns ajustes, obtemos o seguinte código.

QWidget#centralwidget{
	background-color: qlineargradient(spread:pad, x1:0, y1:1, x2:1, y2:0.023, stop:0 rgba(255, 140, 140, 255), stop:1 rgba(94, 122, 255, 255));
	border-radius: 20px;
}

QFrame#frame{
	margin: 60px;
	border-radius: 20px;
	background-color: rgba(225, 228, 221, 120)
}

QLineEdit{
	min-height: 45px;
	border-radius: 20px;
	background-color: #FFFFFF;
	padding-left: 20px;
	color: rgb(140, 140, 140);
}

QPushButton#login_button{
	min-height: 45px;
	border-radius: 20px;
	background-color: rgb(140, 140, 140);
	color: #FFFFFF;
}

QCheckBox{
	font-size: 10px;
	color: #FFFFFF;
}

QLabel{
	color: rgb(95, 94, 108);
}

QPushButton#forgot_button{
	border: 0px;
	font-style: italic;
	font-size: 10px;
	color: #FFFFFF;
}

QPushButton#close_button{
	background-color: rgb(186, 0, 0);
	border-radius: 6px;
}

QPushButton#minimize_button{
	background-color: rgb(226, 226, 0);
	border-radius: 6px;
}

E o resultado do código QSS acima adicionado a nossa aplicação é uma interface de login bonita e moderna como a seguir:

Desde o PyQt 4.5, as folhas de estilo Qt são totalmente suportadas em todas as plataformas. Portanto, é possível manter a mesma aparência em todas as plataformas (Windows, MacOS e Linux). Além disso, a linguagem QSS abre infinitas oportunidades para estilizar seu aplicativo. Ele suporta uma variedade de tipos de seletores, estilo de widgets complexos, pseudo-estados, resolução de conflitos, cascata, herança e muito mais.

Eu recomendo passar alguns momentos com a documentação do QSS. Embora você tenha que estudar um pouco a documentação do Qt e fazer alguns ajustes, o resultado final valerá a pena.

Estou ansioso para ouvir sobre sua experiência e talvez ver seus estilos de aplicação impressionantes.