Folhas de estilo Qt – Acervo Lima Tutorials

Resumo : neste tutorial, você aprenderá como usar a folha de estilo Qt para personalizar os widgets para aplicativos PyQt.

Introdução às folhas de estilo Qt

Qt Style Sheets ou QSS é muito semelhante ao Cascading Style Sheets (CSS) para a web. No entanto, o QSS suporta apenas um número limitado de regras em comparação com o CSS. Por exemplo, QSS oferece suporte ao modelo box, mas não aos layouts flexbox e grid.

Para definir as folhas de estilo para um widget, você chama seu setStyleSheet()método com uma string de folha de estilo. Para demonstrar o QSS, abriremos a seguinte janela de login:

…na seguinte janela de login:

O programa a seguir cria uma janela de login que aparece na primeira imagem sem nenhuma folha de estilo.

import sys
from PyQt6.QtWidgets import QApplication,  QWidget, QLabel, QLineEdit, QPushButton,  QVBoxLayout
from PyQt6.QtCore import Qt
from PyQt6.QtGui import QIcon


class MainWindow(QWidget):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.setWindowTitle('Login')
        self.setWindowIcon(QIcon('./assets/lock.png'))

        layout = QVBoxLayout()
        self.setLayout(layout)

        heading = QLabel(
            'Welcome Back',
            alignment=Qt.AlignmentFlag.AlignHCenter
        )
        heading.setObjectName('heading')

        subheading = QLabel(
            'Please enter your email and password to log in.',
            alignment=Qt.AlignmentFlag.AlignHCenter
        )
        subheading.setObjectName('subheading')

        self.email = QLineEdit(self)
        self.email.setPlaceholderText('Enter your email')

        self.password = QLineEdit(self)
        self.password.setEchoMode(QLineEdit.EchoMode.Password)
        self.password.setPlaceholderText('Enter your password')

        self.btn_login = QPushButton('Login')

        layout.addStretch()
        layout.addWidget(heading)
        layout.addWidget(subheading)
        layout.addWidget(QLabel('Email:'))
        layout.addWidget(self.email)
        layout.addWidget(QLabel('Password:'))
        layout.addWidget(self.password)
        layout.addWidget(self.btn_login)
        layout.addStretch()

        self.show()


if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = MainWindow()
    sys.exit(app.exec())Linguagem de código:  Python  ( python )

Primeiro, faça o fundo branco QWidget:

QWidget {
  background-color: #fff;
}Linguagem de código:  CSS  ( css )

Segundo, altere a cor e o peso da fonte de QLabel:

QLabel {
  color: #464d55;
  font-weight: 600;
}Linguagem de código:  CSS  ( css )

Terceiro, altere a cor, o tamanho da fonte e a margem inferior do QLabeltítulo com o nome do objeto:

QLabel#heading {
  color: #0f1925;
  font-size: 18px;
  margin-bottom: 10px;
}Linguagem de código:  CSS  ( css )

Quarto, altere a cor, o tamanho da fonte, a espessura da fonte e a margem inferior do QLabelsubtítulo do nome do objeto:

QLabel#subheading {
  color: #0f1925;
  font-size: 12px;
  font-weight: normal;
  margin-bottom: 10px;
}Linguagem de código:  CSS  ( css )

Quinto, altere o raio da borda, o estilo da borda e o preenchimento do QLineEditwidget:

QLineEdit {
  border-radius: 8px;
  border: 1px solid #e0e4e7;
  padding: 5px 15px;
}Linguagem de código:  CSS  ( css )

Sexto, destaque a borda do QLineEditquando ele tiver o foco:

QLineEdit:focus {
  border: 1px solid #d0e3ff;
}Linguagem de código:  CSS  ( css )

Sétimo, mude a cor do espaço reservado:

QLineEdit::placeholder {
  color: #767e89;
}Linguagem de código:  CSS  ( css )

Oitavo, faça o QPushButtonarredondado e azul com a cor do texto branca:

QPushButton {
  background-color: #0d6efd;
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid #0d6efd;
  padding: 5px 15px;
  margin-top: 10px;
  outline: 0px;
}Linguagem de código:  CSS  ( css )

Nono, altere a borda do QPushButtonquando estiver passando o mouse ou focando:

QPushButton:hover,
QPushButton:focus {
  background-color: #0b5ed7;
  border: 3px solid #9ac3fe;
}Linguagem de código:  CSS  ( css )

Décimo, coloque todas as regras do QSS em um arquivo como login.qss:

QWidget {
  background-color: #fff;
}
QLabel {
  color: #464d55;
  font-weight: 600;
}
QLabel#heading {
  color: #0f1925;
  font-size: 18px;
  margin-bottom: 10px;
}

QLabel#subheading {
  color: #0f1925;
  font-size: 12px;
  font-weight: normal;
  margin-bottom: 10px;
}
QLineEdit {
  border-radius: 8px;
  border: 1px solid #e0e4e7;
  padding: 5px 15px;
}

QLineEdit:focus {
  border: 1px solid #d0e3ff;
}

QLineEdit::placeholder {
  color: #767e89;
}
QPushButton {
  background-color: #0d6efd;
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid #0d6efd;
  padding: 5px 15px;
  margin-top: 10px;
  outline: 0px;
}
QPushButton:hover,
QPushButton:focus {
  background-color: #0b5ed7;
  border: 3px solid #9ac3fe;
}Linguagem de código:  CSS  ( css )

Por fim, leia o QSS do login.qssarquivo e passe o conteúdo para o setStyleSheet()método do QApplicationmétodo:

app.setStyleSheet(Path('login.qss').read_text())Linguagem de código:  Python  ( python )

Aqui está o programa completo:

import sys
from pathlib import Path
from PyQt6.QtWidgets import QApplication,  QWidget, QLabel, QLineEdit, QPushButton,  QVBoxLayout
from PyQt6.QtCore import Qt
from PyQt6.QtGui import QIcon


class MainWindow(QWidget):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.setWindowTitle('Login')
        self.setWindowIcon(QIcon('./assets/lock.png'))

        layout = QVBoxLayout()
        self.setLayout(layout)

        heading = QLabel(
            'Welcome Back',
            alignment=Qt.AlignmentFlag.AlignHCenter
        )
        heading.setObjectName('heading')

        subheading = QLabel(
            'Please enter your email and password to log in.',
            alignment=Qt.AlignmentFlag.AlignHCenter
        )
        subheading.setObjectName('subheading')

        self.email = QLineEdit(self)
        self.email.setPlaceholderText('Enter your email')

        self.password = QLineEdit(self)
        self.password.setEchoMode(QLineEdit.EchoMode.Password)
        self.password.setPlaceholderText('Enter your password')

        self.btn_login = QPushButton('Login')

        layout.addStretch()
        layout.addWidget(heading)
        layout.addWidget(subheading)
        layout.addWidget(QLabel('Email:'))
        layout.addWidget(self.email)
        layout.addWidget(QLabel('Password:'))
        layout.addWidget(self.password)
        layout.addWidget(self.btn_login)
        layout.addStretch()

        self.show()


if __name__ == '__main__':

    app = QApplication(sys.argv)
    app.setStyleSheet(Path('login.qss').read_text())
    window = MainWindow()
    sys.exit(app.exec())Linguagem de código:  Python  ( python )

Configurando folhas de estilo Qt no Qt Designer

Primeiro, clique com o botão direito no formulário e selecione StyleSheeto menu Alterar…:

Folhas de estilo Qt - Qt Designer Etapa 1

Segundo, insira as folhas de estilo Qt no editor de folhas de estilo e clique no botão Aplicar. Depois que o QSS for aplicado, você verá seu efeito no design: