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 PROJETO
git clone https://github.com/MrCl0wnLab/Python_QT_CustomTheme
INSTALANDO
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
Arquivo tema: themes/Combinear/theme.qss
TEMA DARKEUM
Arquivo tema: themes/Darkeum/theme.qss
TEMA FIBERS
Arquivo tema: themes/Fibers/theme.qss
TEMA FIBRARY
Arquivo tema: themes/Fibrary/theme.qss
TEMA GENETIVE
Arquivo tema: themes/Genetive/theme.qss
TEMA WSTARTPAGE
Arquivo tema: themes/Wstartpage/theme.qss
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.
É justamente no Central Widget que vamos setar nosso estilo e o fluxo é simples.
- ABRIR ARQUIVO .qss
- CRIAR OBJETO USANDO A CLASS Ui_MainWindow
- SETAR ESTILO DO centralwidget USANDO A PROPRIEDADE setStyleSheet(var:str)
- 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
REF
- https://doc.qt.io/qt-5/qtdesigner-manual.html
- https://doc.qt.io/qt-5/designer-ui-file-format.html
- https://doc.qt.io/qtforpython/tutorials/basictutorial/uifiles.html
- https://doc.qt.io/qtcreator/search-results.html?q=file%20ui
- https://doc.qt.io/qt-5/qmainwindow.html#creating-main-window-components
- https://qss-stock.devsecstudio.com/templates.php
- https://doc.qt.io/archives/qt-4.8/stylesheet-examples.html
- https://doc.qt.io/qt-5/stylesheet-reference.html
- https://doc.qt.io/qt-5/qcalendarwidget.html
- https://filememo.info/extension/qss
- https://pypi.org/project/PySide2/
Post feito ao som de: