Layout management is an important part of GUI programming. Layout management is the technique of placing a control on a form, which is implemented in two basic ways: absolute layout and Layout class. Absolute Layout
The programmer wants to specify the pixel position and size of each control. Be aware of its limitations when using absolute layout:
1-the size and position of the control will not change as the size of the form adjusts
2-Programs may have different skins on different platforms
3-Changing the font of the program may break the layout
4-If you want to change the layout, you can only redo it, which is boring and time-consuming.
The following example places the control in absolute coordinates.
Import sys
from pyqt5.qtwidgets import Qwidget, Qlabel, Qapplication
class Example (qwidget):
def __init__ ( Self):
super (). __init__ ()
Self.initui ()
def initui (self):
lb11 = Qlabel ("You", self)
lb11.move (a)
LB12 = Qlabel ("are", self)
lb12.move (35,44)
lb13 = Qlabel (best, self)
lb13.move
Self.setgeometry (Self.setwindowtitle) (
"Absolute")
self.show ()
If __name__ = "__ main__ ":
app = Qapplication (SYS.ARGV)
ex = Example ()
sys.exit (App.exec_ ())
We use the move () method to place the control. In the example we place the label by setting the x, y coordinates. The origin of the coordinate system is in the upper-left corner of the form. The x axis grows from left to right, and the y-axis grows from top to bottom.
LBL1 = Qlabel (' Zetcode ', self)
lbl1.move (15, 10)
The label control is located on the coordinates of the x=15,y=10.
Box Layout
Layout classes provide better flexibility and practicality for layout management, which is the preferred way to place controls on a form. Qhboxlayout and Qvboxlayout are the two basic layout classes that position controls horizontally and vertically.
If you want to place two buttons in the lower-right corner, we need to use the hboxlayout and Vboxlayout, and set the stretch factor (stretching factor) to create the required blank space.
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")
Hbox = Qhboxlayout ()
Hbox.addstretch (1 )
Hbox.addwidget (okbutton)
hbox.addwidget (cancelbutton)
VBox = Qvboxlayout ()
Vbox.addstretch (1)
Vbox.addlayout (Hbox)
self.setlayout (VBox) self.setgeometry (self.setwindowtitle)
("Buttons")
Self.show ()
if __name__ = = "__main__":
app = Qapplication (SYS.ARGV)
ex = Example ()
sys.exit ( APP.EXEC_ ())
This example places two buttons in the lower-right corner of the form. Their position does not change when the form size is resized. At the same time we used Qhboxlayout and qvboxlayout.
OKButton = Qpushbutton ("OK")
CancelButton = Qpushbutton ("Cancel")
Two buttons are created here
Hbox = Qhboxlayout ()
hbox.addstretch (1)
hbox.addwidget (okbutton)
hbox.addwidget (CancelButton)
We created a horizontal boxlayout and added a stretch factor and two buttons. The stretch method adds a stretch space to the front of the two buttons to squeeze the button to the right of the form.
VBox = Qvboxlayout ()
vbox.addstretch (1)
vbox.addlayout (Hbox)
Get the layout we need by placing the horizontal layout inside the vertical layout. The stretch factor of the vertical layout squeezes the button to the bottom of the form.
Self.setlayout (VBox)
Finally, set VBox as the main layout of the form.
Qgridlayout
Grid layout is the most common layout. It splits the space by the ranks. We use class Qgridlayout to create a grid layout.
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
self.setwindowtitle ("Calculator")
self.show ()
if __ name__ = = "__main__":
app = Qapplication (SYS.ARGV)
ex = Example ()
sys.exit (App.exec_ ())
In this example, we create a button that fills the entire grid.
Grid = Qgridlayout ()
self.setlayout (GRID)
This creates a Qgridlayout instance and sets it to the layout of the form.
names = [' Cls ', ' Bck ', ', ', ', ', ' Close ',
' 7 ', ' 8 ', ' 9 ', '/', '
4 ', ' 5 ', ' 6 ', ' * ', '
1 ', ' 2 ', ' 3 ', '-', ' 0 ', '
. ', ' '=', '+']
These are the labels for the buttons.
positions = [(I,J) for I in range (5) for J in Range (4)]
We created a series of positional coordinates in the grid.
For position, name in zip (positions, names):
if name = = ':
continue
button = Qpushbutton (name)
Grid.addwidget (button, *position)
Add the created button to the layout by using the AddWidget () method.
a simple comment form
Control can span rows or columns in a layout. As shown in the following example.
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 (Grid.addwidget) (title, 1, 0) grid.addwidget (titleedit, 1, 1) grid.addw Idget (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 (+, MB, MB) Self.setwindow Title ("Review") self.show () if __name__ = = "__main__": App = Qapplication (sys.argv) ex = Example () s Ys.exit (App.exec_ ())
We created a form with three labels, two lineedit, and one textedit. The qgridlayout layout is adopted.
Grid = Qgridlayout ()
grid.setspacing (10)
We created a grid layout and set the control spacing for it.
Grid.addwidget (Reviewedit, 3, 1, 5, 1)
When adding controls, we can set the control to span rows or columns. In the example we will reviewedit the control across 5 rows.
This part of the tutorial mainly explains the layout management.