Qt Style Sheets в Python — как использовать

В этом уроке вы узнаете, как использовать Qt Style Sheet в Python для настройки виджетов приложений PyQt.

Знакомство с Qt Style Sheet

Qt Style Sheets или QSS очень похоже на Cascading Style Sheets(CSS) для web. Однако QSS поддерживает только ограниченное количество правил по сравнению с CSS. Например, QSS поддерживает модель box, но не поддерживает макеты flexbox и grid.

Чтобы установить стили таблиц для виджета, вы вызываете его метод setStyleSheet() со строкой таблицы стилей. Чтобы продемонстрировать QSS, мы перевернем следующее окно входа:

…в следующее окно входа:

Следующая программа создает окно входа в систему, показанное на первом рисунке, без каких-либо таблиц стилей.

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())

• Сначала сделаем фон QWidget белым:

QWidget {
  background-color: #fff;
}

• Во-вторых, изменим цвет и толщину шрифта QLabel:

QLabel {
  color: #464d55;
  font-weight: 600;
}

• В-третьих, изменим цвет, размер шрифта и отступ снизу QLabel с заголовком имени объекта:

QLabel#heading {
  color: #0f1925;
  font-size: 18px;
  margin-bottom: 10px;
}

• В-четвертых, изменим цвет, размер шрифта, насыщенность шрифта и отступ снизу QLabel с подзаголовком имени объекта:

QLabel#subheading {
  color: #0f1925;
  font-size: 12px;
  font-weight: normal;
  margin-bottom: 10px;
}

• В-пятых, изменим радиус скругления, стиль границы и отступ виджета QLineEdit:

QLineEdit {
  border-radius: 8px;
  border: 1px solid #e0e4e7;
  padding: 5px 15px;
}

• В-шестых, выделим границу QLineEdit, когда он находится в фокусе:

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

• В-седьмых, изменим цвет заполнителя:

QLineEdit::placeholder {
  color: #767e89;
}

• Восьмое, сделаем кнопку QPushButton круглой и синей, а цвет текста — белым:

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 при наведении или фокусе:

QPushButton:hover,
QPushButton:focus {
  background-color: #0b5ed7;
  border: 3px solid #9ac3fe;
}

• В-десятых, поместим все правила QSS в файл типа 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;
}

• Наконец, считаем QSS из файла login.qss и передадим содержимое методу setStyleSheet() метода QApplication:

app.setStyleSheet(Path('login.qss').read_text())

Вот полная программа:

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())

Настройка Qt Style sheets в Qt Designer

Сначала щелкните правой кнопкой мыши форму и выберите «Change StyleSheet… menu»:

Во-вторых, введите Qt Style Sheets в Style Sheet Editor и нажмите кнопку Apply. После применения QSS вы увидите его эффект в дизайне:

В-третьих, закройте редактор таблиц стилей и просмотрите форму(Ctrl-R):