Python QT: Mudando estilo do Form.

 


Projeto visando auxiliar programadores Python na personalização de Forms feitos com biblioteca QT. Esse projeto demonstra diversos temas e o uso de arquivos .qss.

.qss Extensão de arquivo
Arquivo de folha de estilo usado pelos programas Qt contém definições para a aparência dos elementos GUI, incluindo fontes, tamanhos, cores, layouts e comportamentos de mouse; armazena uma biblioteca de estilos que podem ser incorporados em uma interface de usuário. Os arquivos QSS são semelhantes aos arquivos .css . Eles podem ser criados com qualquer editor de texto.


Baixando o projeto
git clone https://github.com/MrCl0wnLab/Python_QT_CustomTheme
Installation
Use the package manager pip.

Pip
pip install PyQt5
pip install PySide2
Run
python main.py
QT Designer
É uma Qt-Tool para projetar e construir interfaces gráficas de usuário (GUIs) com Qt Widgets. Você pode compor e personalizar seus forms.
Ubuntu: sudo apt install qttools5-dev
Fedora: sudo dnf install qt5-qttools qt5-designer
Windows: python -m pip install pyqt5-tools

Arquivo no formato QT Designer
form_qt_designer/
└── MainForm.ui

O formato de arquivo UI usado pelo Qt Designer é formatado pelo estrutura XML. tal formatação pode mudar em versões futuras do Qt.

Temas usados no projeto
├── Combinear
│   └── theme.qss
├── Darkeum
│   └── theme.qss
├── Fibers
│   └── theme.qss
├── Fibrary
│   └── theme.qss
├── Genetive
│   └── theme.qss
└── Wstartpage
    └── theme.qss

Tema Combinear


Tema Darkeum


Tema Fibers


Tema Fibrary


Tema Genetive


Tema Wstartpage


Lembrando que todos os temas divulgados nesse post foram desenvolvidos pela equipe Dev Sec Studio.


Processo para setar o tema.
Todo estilo usado no forms foi concentrado nos arquivos .qss isso facilita manutenção e melhor controle do visual do projeto. para atribuir tal folha de estilo ao forms é preciso entender que quase todos componentes do QT tem a propriedade setStyleSheet(var:str), e como próprio nome descreve é focada na atribuição de StyleSheet

Para setar o tema de forma global em nosso forms usamos o Widget centralwidget, que basicamente faz parte da estrutura do Forms QT e sem ele não é possível criar um forms.

Note: Creating a main window without a central widget is not supported. You must have a central widget even if it is just a placeholder.


centralwidget


É justamente no Central Widget que vamos setar nosso estilo e o fluxo é simples.
  1. ABRIR ARQUIVO .qss
  2. CRIAR OBJETO USANDO A CLASS Ui_MainWindow
  3. SETAR ESTILO DO centralwidget USANDO A PROPRIEDADE setStyleSheet(var:str)
  4. ABRIR FORM
Tal processo é descrito no arquivo main.py
from PySide2.QtWidgets import QMainWindow, QApplication
from ui_MainForm import Ui_MainWindow
import os
import sys

# CAMINHA DO TEMA
STR_THEME_PATH = "themes/[THEME_NAME]/theme.qss"

# NOME DA PASTA TEMA
# Combinear, Darkeum, Fibers, Fibrary, Genetive, Wstartpage
STR_THEME_NAME = 'Combinear'

# CREATE PRINCIPAL FORM 
class MainWindow(QMainWindow):
    def __init__(self, parent=None):
        super(MainWindow, self).__init__(parent)

        # Objeto com informações da class Ui_MainWindow.
        # Arquivo: ui_MainForm.py
        self.ui = Ui_MainWindow()

        # Setando valor nome do tema que será usado.
        themeFile = STR_THEME_PATH.replace('[THEME_NAME]', STR_THEME_NAME)

        # Setando informações do forms e criando "componentes".
        self.ui.setupUi(self)

        # Setando estilo do tema.
        self.theme(themeFile)

        # Abrindo o form.
        self.show()

    def theme(self, file):
        str_ = open(file, 'r').read()
        '''Note: Creating a main window without a central 
        widget is not supported. You must have a central 
        widget even if it is just a placeholder.
        https://doc.qt.io/qt-5/qmainwindow.html#creating-main-window-components'''
        self.ui.centralwidget.setStyleSheet(str_)


if __name__ == "__main__":
    try:
        app = QApplication(sys.argv)
        window = MainWindow()
        sys.exit(app.exec_())
    except Exception as err:
        print(err)
Tree
.
├── form_qt_designer
│   └── MainForm.ui
├── main.py
├── README.md
├── screenshot
│   ├── banner.png
│   ├── Combinear.png
│   ├── Darkeum.png
│   ├── Fibers.png
│   ├── Fibrary.png
│   ├── Genetive.png
│   ├── qt.png
│   └── Wstartpage.png
├── themes
│   ├── Combinear
│   │   ├── Combinear.png
│   │   ├── License.txt
│   │   └── theme.qss
│   ├── Darkeum
│   │   ├── Darkeum.png
│   │   ├── License.txt
│   │   └── theme.qss
│   ├── Fibers
│   │   ├── Fibers.png
│   │   ├── License.txt
│   │   └── theme.qss
│   ├── Fibrary
│   │   ├── Fibrary.png
│   │   ├── License.txt
│   │   └── theme.qss
│   ├── Genetive
│   │   ├── Genetive.png
│   │   ├── License.txt
│   │   └── theme.qss
│   └── Wstartpage
│       ├── License.txt
│       ├── theme.qss
│       └── Wstartpage.png
└── ui_MainForm.py


Refs

Comentários

Postagens mais visitadas deste blog

Nova versão do Scanner INURLBR!

OSINT: Buscando Chaves API de Google Maps usando Google Hacking

OSINT: Precisa Medicamentos