In the previous article, I talked about how to use layout to layout. But after finishing the layout, I found that the interface is a bit strange. For example, the bottom "clear" button is so big, the label "message body" is not in the middle, etc. Next, I will talk about how to continue to optimize the interface.
1. Adjust the size and position of the "Clear" button
(1) In "sizePolicy", select Fixed.
(2) Drag "Horizontal Layout" in the left column to the side of the "Clear" button (either above or below).
(3) Select the "Clear" button with the mouse, and drag the button to the "Horizontal Layout" control on the right column.
Then the interface becomes like this:
2. Move the label "Message Body" to the middle of the box where it is located
Using the same method, we can move the "message body" label to the middle of the frame.
(1) Drag "Horizontal Layout" in the left column to the side of the "Message Body" label.
(2) Select the "message body" label with the mouse, and drag the label to the "Horizontal Layout" control on the right column.
(3) In the "sizePolicy" of the "Message Body" label, select Fixed.
3. Adjust the text box below the "Message Body" so that the top and left text boxes are flush.
Select the Horizontal Layout added when adjusting the "message" label, and adjust the layoutTopMargin and layoutBottomMargin of the layout, here are 4 and 6 respectively.
4. Adjust the size of the "Header" and "+-" buttons
（1）
Adjust the size of the horizontal stretch of sizePolicy in the "Message Header" to adjust its size. Here I adjust the "Horizontal Stretch" to 2.
（2）
Put a "Horizontal Spacer" in the middle of the "+-" button to separate the distance between the "+-" buttons.
Now, the interface looks much better.
I spent 2 articles explaining how to do interface layout, and adjusting the size and position of interface controls. Now I will talk about the overall idea of interface layout:
(1) When drawing the interface, don't consider any layout, just drag and drop the control to the corresponding position.
(2) Start the layout from the innermost layer first. That is to say, the layout starts from the inside to the outside, from small to large.
(3) After the internal and small control layouts are completed, consider these layouts as controls to complete the external layout.
(4) Finally, adjust the parameters of the layout, and the size and position of the control.
reference:
(1) Python Qt graphical interface programming - PySide2 PyQt5 PyQt PySide