This article is about: Windows OS, Python, PyQt5, Qt Designer, PyCharm
I. Adaptive Principles
Adaptive is actually quite simple, once you figure out the principles, you'll be able to lay out your page however you want.
It is based on the layout, with the layout, and then placed in the layout of the various controls, we can let the control to achieve the effect of adaptive, that is: no matter before or after clicking on the maximize button, the size of the control proportion can follow the change in the size of the window and change.
Let's understand the layout first, there are 3 main types:
| Horizontal layout (H) | The controls inside will be arranged horizontally, i.e. left to right. |
| Vertical layout (V) | The controls inside will be arranged vertically, i.e., placed from top to bottom |
| Raster layout (G) | The controls are arranged in a grid, and can be placed on the top, bottom, left, and right sides. |
There are other layouts, but they are not used much and are not mentioned in this article.
II. Example of Basic Layout
Open Qt Designer, create a new window, drag in a frame control, and then go through the layout to make it adapt to the window. As shown in the following figure:
From the object viewer on the right side we can see that there are 2 icons with a red forbidden symbol in the lower right corner, which means that the current object is not using a layout. As we said before, if the control is not in a layout, then it cannot adapt to the window.
So how do we make this frame control adapt to the window? In fact, it is very simple, because our purpose is to let the frame to adapt to the window, then we will be the entire window as a layout container on the line.
This is done by clicking the mouse on a blank area of the window where there are no controls, then right clicking and setting the horizontal layout. Note: Not the gray area! The steps are shown below:
After the setting is completed, you will find that the size of the frame is directly consistent with the size of the window. Observe the right side of the object viewer, frame object above the layout of the centralwidget icon is normal display, just the red prohibit sign has disappeared. As shown in the figure below:
Is that the end of it? Theoretically yes, but it's not perfect. If you look closely you'll see that the edges of the frame and the blue edge of the window don't fit perfectly, which leads to some gaps around the edges, which is also rather aesthetically displeasing.
Because in Qt Designer, the layout is left empty by default, we need to manually adjust it, the adjustment steps are as follows:
In step 1, we mouse click on the centralwidget in the Object Viewer and then click on the Property Editor (or press the key combination: Ctrl + I, the letter i, not 1) to make specific settings for the centralwidget.
Step 2, slide the properties bar of the centralwidget to the bottom, we will see a property called Layout, and then change all the values in it to 0.
As shown in the figure below:
I'll give you a translation of the meaning of the attributes, just understand it against the picture above, no need to memorize it:
| layoutName | horizontalLayout |
| layoutLeftMargin | 9 |
| layoutTopMargin | 9 |
| layoutRightMargin | 9 |
| layoutBottomMargin | 9 |
| layoutSpacing | 6 |
| layoutStretch | 0 |
| layoutSizeConstraint | SetDefaultConstraint |
In Qt Designer, press the key combination: Ctrl + R to preview the design, and then click the maximize button in the upper right corner to test it, the frame is also perfectly consistent with the window size. If it is not convenient to observe, you can set the background color of the frame to any color first and then you can observe it clearly.
At this point, our basic example is complete.
Advanced Layout Example: Layout Nested Layout
The basic example above adds only 1 layout, but whenever our program is a little more complex, it will use many controls, each with a different position in the window.
For example, now very popular left menu, right workspace layout mode, as shown below:
This layout pattern is classic and intuitive. Let's look at this picture from a Qt perspective. On the left side, in black, is a treeWidget, on the right side is a stackedWidget, and then there are many more controls inside the stackedWidget.
So using this as an example, since the treeWidget and stackedWidget are placed left and right, then we can set it up with a horizontal layout.
According to the above basic example, we drag and drop 1 treeWidget and 1 stackedWidget in respectively, and then click the blank space of the window, set the horizontal layout with the right mouse button, and finally set all the values under the Layout attribute to 0. The result is shown in the following figure: (In order to make it easier for you to observe, I set the background of the stackedWidget to light (for your observation, I set the background of the stackedWidget to light gray)
As we can see from the picture, the menu bar and workspace are displayed in half in the window, which is not what we want. So we also need to set the display ratio of these two controls, set the same method: we still click the centralwidget, and then find the Layout property under the layoutStretch (layout stretch), the default is "0,0", now we will set it to "1,3".
Here the layout stretch, you can understand the stretch ratio, 00 is half of the display, 13 is 1 to 3 display. After modifying the values, we are surprised to find that the interface becomes like the following:
The scale of the display is basically in line with our requirements, but after pressing the key combination Ctrl + R to preview, and then clicking on the maximize button, we found that the interface becomes like the following:
It's still not right, after maximizing, although the ratio of the menu bar to the workspace is still 1 to 3, this ratio is still too wide for the menu, and it looks like the words on the menu are very dense and small. Of course, the font size and spacing on the menu can be adjusted, but the ratio of 1 to 3 is still too wide for a menu bar with a maximum of 4 characters.
So our purpose is obvious, is to narrow the width of the menu bar some more. Width narrowing, which involves the modification of specific values, and just now the proportion of the modification can only be a whole number, can not be accurate to a few decimal places.
So how exactly do you do it? The method is as follows:
Because we just modify the menu bar, so in the object viewer, we mouse click to select the treeWidget, press the key combination Ctrl + I or click the bottom of the Property Editor to enter the treeWidget's specific attributes of the interface, to find a named maximumSize (maximum size) under the width of the back of the 16777215 modified to 180. As shown in the figure below:
After modifying the maximum width of the menu bar, we previewed it again and found that the width of the menu bar was fixed, and only the vertical height was changing with the size of the window. This result is basically in line with our expectations.
See here, there may be small partners will ask: Hey, not right ah angle angle, you this third title is not written on the layout of the layout nested layout? How just more than the basic example of a control only?
Don't worry. What I'm about to say is the point.
Through the example just now, I believe we are familiar with the horizontal layout. Now, we can think about it: is it possible to put a layout as a control into the horizontal layout of the window? The answer is yes.
As we can see, in the one net diagram I put above, there are a lot of big and small controls in the workspace in it. So we have to add more layout in the workspace i.e. stackedWidget to make it work.
Let's drag and drop 3 frames into stackedWidget again, then press Ctrl and don't let go to select the 3 frames in turn and set them to horizontal layout, as shown in the following figure:
Previewing the window, we find that after maximizing the window, the size of the bottom 2 menu bars and the workspace is normal, but the 3 frames are not moving at all.
Use your brain to figure out if there is a step missing somewhere.
Oh! By the way, when we set up the bottom 2 controls, did we set up a horizontal layout in the blank space of the window? Then we follow the example of the stackedWidget in the blank space of the right mouse button to add a horizontal layout, found that the results become the following ......
This is definitely not what we want, so is it because there are too few controls, so these 3 frames fill up the stackedWidget? No, if we drag and drop controls into it, it is still arranged in this way, because the layout of the three frames outside the nearest neighbor is horizontal layout, as long as the horizontal layout inside, put more controls are still arranged from left to right.
So now there are 2 solutions:
The first is to select the frame outside the horizontal layout of the right-click to modify the grid layout, so that the top and bottom of the left and right can be put in the control, can be normal with the window size of the adaptive, this is also considered to be the layout of the layout of the nested layout, but only a layer of nested only.
The second kind, is to break the layout, that is, delete all the current window layout, and then re-layout. Method of operation: mouse click on a blank window, click the right mouse button, click the layout, find the layout and then click to break. As shown in the figure below:
In this way, all the layouts will be deleted all in one click, and the controls will be randomly placed in the window with a change in size. But don't panic, after breaking the layouts, let's observe the following webmap:
Area ① is a menu, which is a separate treeWidget control, because its height is equal to the width of the window, so we can not see the area ② ③ ④ as a whole and area ① to do a horizontal layout?
Then observe ② ③ ④, are these 3 lined up top and bottom? So we set these 3 frames to a vertical layout. Then, we see that there are 3 frames in the area ③ that are arranged horizontally, so we set these 3 frames to a horizontal layout.
Because there is only 1 menu on the left, the right side of the control is a lot, so we first set the right side of the control in order from top to bottom into the layout, and then select ② ③ ④ layout, and then right-click to the outside of the outside of the set a vertical layout.
Finally, we select the menu bar, and then select the outermost vertical layout of the workspace, and then right-click to set a horizontal layout, so it is done!
Note: If you need a multi-layer layout in a window, be sure to set up the layout in order from inside to outside and from small to large.
Fourth, other special controls adaptive supplement
1. tableWidget
This is a form control, I previously used, found that it in the set layout, the size of the control is to follow the size of the window to change, but the form of data is not adaptive to the control body, the need for business logic code to add a line of code as follows:
().setSectionResizeMode( | )
To this point this article on pyqt5 control adaptive window ultra-detailed knowledge summary of the article is introduced to this, more related pyqt5 control adaptive window knowledge content please search for my previous articles or continue to browse the following related articles I hope you will support me in the future more!