Hay dos formas de diseño en PyQt5, posicionamiento absoluto y clase de diseño.
A continuación, presentamos el diseño de página de PyQt5, que se divide principalmente en posicionamiento absoluto y diseño.
1. Posicionamiento absoluto
El programa especifica la posición y el tamaño (en píxeles) de cada control.
El posicionamiento absoluto tiene las siguientes limitaciones:
- El tamaño y la posición de los controles no cambian si se cambia el tamaño de la ventana
- Las aplicaciones se verán diferentes en varias plataformas
- Si cambia la fuente, el diseño de nuestra aplicación cambia
- Si decide cambiar el diseño, debe rehacer completamente el diseño
por ejemplo:
import sys
from PyQt5.QtWidgets import QWidget, QLabel, QApplication
class Example(QWidget):
def __init__(self):
super().__init__()
self.initUI()
def initUI(self):
lbl1 = QLabel('Zetcode', self)
lbl1.move(15, 10)
lbl2 = QLabel('tutorials', self)
lbl2.move(35, 40)
lbl3 = QLabel('for programmers', self)
lbl3.move(55, 70)
self.setGeometry(300, 300, 250, 150)
self.setWindowTitle('Absolute')
self.show()
if __name__ == '__main__':
app = QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())En este ejemplo, definimos tres etiquetas y las movemos a la posición correspondiente por movimiento.
No importa cómo cambiemos el tamaño de la ventana, no cambia su tamaño y posición.
2. Clase de diseño
1. Diseño de caja Diseño de caja
Cree diseños horizontales y verticales utilizando QHBoxLayout y QVBoxLayout, respectivamente.
import sys
from PyQt5.QtWidgets import (QWidget, QPushButton,
QHBoxLayout, QVBoxLayout, QApplication)
class Example(QWidget):
def __init__(self):
super().__init__()
self.initUI()
def initUI(self):
okButton = QPushButton("OK")
cancelButton = QPushButton("Cancel")
testButton = QPushButton("test")
hbox = QHBoxLayout()
#hbox.addStretch(1)
hbox.addWidget(okButton)
#hbox.addStretch(2)
hbox.addWidget(cancelButton)
#hbox.addStretch(1)
hbox.addWidget(testButton)
vbox = QVBoxLayout()
vbox.addStretch(1)
vbox.addLayout(hbox)
self.setLayout(vbox)
self.setGeometry(300, 300, 300, 150)
self.setWindowTitle('Buttons')
self.show()
if __name__ == '__main__':
app = QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())Definimos tres botones ok, cancelar y probar. Donde addStretch es el factor de estiramiento, que determina qué tan lejos está cada control cuando se estira.
En este ejemplo, se muestran tres botones en la esquina inferior derecha de la ventana usando HBoxLayout y QVBoxLayout y agregando un factor de extensión.
hbox = QHBoxLayout()
hbox.addStretch(1)
hbox.addWidget(okButton)
#hbox.addStretch(2)
hbox.addWidget(cancelButton)
#hbox.addStretch(1)
hbox.addWidget(testButton)Cree un diseño horizontal y agregue un factor de estiramiento y tres botones. El tramo delante de los dos botones añade un espacio retráctil. Esto los empujará hacia la derecha.
vbox = QVBoxLayout()
vbox.addStretch(1)
vbox.addLayout(hbox)Cree un diseño vertical y agregue un factor de extensión para que el diseño horizontal aparezca en la parte inferior de la ventana.
self.setLayout(vbox) La pantalla final es la siguiente:
2. Diseño de tabla QGridLayout
Un diseño de tabla divide el espacio en filas y columnas, creando un diseño de cuadrícula utilizando la clase QGridLayout.
import sys
from PyQt5.QtWidgets import (QWidget, QGridLayout,
QPushButton, QApplication)
class Example(QWidget):
def __init__(self):
super().__init__()
self.initUI()
def initUI(self):
grid = QGridLayout()
self.setLayout(grid)
names = ['Cls', 'Bck', '', 'Close',
'7', '8', '9', '/',
'4', '5', '6', '*',
'1', '2', '3', '-',
'0', '.', '=', '+']
positions = [(i,j) for i in range(5) for j in range(4)]
for position, name in zip(positions, names):
if name == '':
continue
button = QPushButton(name)
grid.addWidget(button, *position)
self.move(300, 150)
self.setWindowTitle('Calculator')
self.show()
if __name__ == '__main__':
app = QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())En el ejemplo, se crea una cuadrícula de botones.
grid = QGridLayout()
self.setLayout(grid)Se crea una instancia de QGridLayout y establece el diseño de la ventana de la aplicación.
names = ['Cls', 'Bck', '', 'Close',
'7', '8', '9', '/',
'4', '5', '6', '*',
'1', '2', '3', '-',
'0', '.', '=', '+']Las etiquetas de estos botones se colocan de la siguiente manera:
positions = [(i,j) for i in range(5) for j in range(4)]Crea una lista de ubicaciones en una cuadrícula.
for position, name in zip(positions, names):
if name == '':
continue
button = QPushButton(name)
grid.addWidget(button, *position)Los botones se crean y agregan al diseño mediante el método addWidget().
Los controles también pueden abarcar varias filas o columnas en una cuadrícula, como se ilustra en el ejemplo del siguiente comentario.
import sys
from PyQt5.QtWidgets import (QWidget, QLabel, QLineEdit,
QTextEdit, QGridLayout, QApplication)
class Example(QWidget):
def __init__(self):
super().__init__()
self.initUI()
def initUI(self):
title = QLabel('Title')
author = QLabel('Author')
review = QLabel('Review')
titleEdit = QLineEdit()
authorEdit = QLineEdit()
reviewEdit = QTextEdit()
grid = QGridLayout()
grid.setSpacing(10)
grid.addWidget(title, 1, 0)
grid.addWidget(titleEdit, 1, 1)
grid.addWidget(author, 2, 0)
grid.addWidget(authorEdit, 2, 1)
grid.addWidget(review, 3, 0)
grid.addWidget(reviewEdit, 3, 1, 5, 1)
self.setLayout(grid)
self.setGeometry(300, 300, 350, 300)
self.setWindowTitle('Review')
self.show()
if __name__ == '__main__':
app = QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())Cree una ventana con tres pestañas, ediciones de dos líneas y un widget de edición de texto. Luego use QGridLayout para completar el diseño. Cree un diseño de cuadrícula y establezca el espacio entre los componentes. Al agregar un pequeño widget a la cuadrícula, puede proporcionar el intervalo de filas y columnas del widget. En el ejemplo, establezca el intervalo de filas y columnas para los widgets agregados al diseño de cuadrícula. El intervalo de filas se establece en 5 y el intervalo de columnas se establece en 1.
La salida se ve así:
Este artículo es la cuarta parte de "Learn PyQt5 from Scratch" , ¡espero que puedan apoyar y aprender juntos!