In the previous chapter, we used codes to directly design the interface. In this chapter, we used Qt Designer to design the interface. It is simple and direct, and what you see is what you get, which greatly improves work efficiency, especially for complex interfaces.
1 Familiar with Qt Designer
Qt Designer is a software designed by Qt for interface design, which enables users to directly arrange the interface by dragging and dropping, and then Qt Creator can convert the interface of Qt Designer into C++ code. Qt also built Qt Designer into Qt Creator, allowing users to switch back and forth between interface and code in an editor. In the previously created HelloWorld project, double-click mainwindow.ui, and the following interface appears:
This is what the Qt Designer embedded in Qt Creator looks like, but since we all prefer a black theme when programming with Qt Creator, this makes the built-in Qt Designer dark, and dragging controls on it is not very clear , so I recommend that you open Qt Designer separately to design the interface. The Qt Designer opened separately has a white theme and the interface is relatively clear. ok!
How to quickly open Qt Designer in the project, you can do this: put the mouse on mainwindow.ui in the project directory on the left, right click, select "Open with...", and then select Qt Designer, as shown in the following figure:
The opened Qt Designer software is shown in the figure below:
Even if you have never used this software, you can understand the content of each component of the software at a glance. Let's simplify the interface, remove the parts that are not commonly used or temporarily unused, and cross out the signal/slot editor, action editor, and resource browser sub-interfaces in the lower right corner of the software, leaving the top menu in the entire software Toolbar, the control area on the left, the interface layout area in the middle, and the object viewer and property editor on the right. The process of using Qt Designer to design an interface is roughly as follows: ①Drag and drop the required controls from the control area to the interface layout area; ②Then in the object viewer, you can see the controls and the order of the controls in the interface; ③Then in the property editor ④ Click the layout tool in the top toolbar to layout the interface; ⑤ Remember to save, otherwise Qt Creator will not be able to obtain the latest interface changes.
2. Drag and drop controls for layout
Next, we use Qt Designer to design the interface, display the words "Hello World" in the window, and then use Qt Creator to compile the program to generate the window. We don't use the menu bar and status bar for the time being, remove them first, and then follow the five steps just summarized, we operate as shown in the following animation:
I placed a Label control, set the text property of the Label to "Hello World", set the horizontal alignment to the center, then click the window to select the window, then click "Horizontal Layout" in the toolbar to fill the Label into the window , when you stretch the window for window zoom, "Hello World" is always in the center of the window. After designing the interface (be sure to save it), switch to Qt Creator to run the program directly, wait for the compilation to complete and run, and the following window will be displayed:
At this point, the process of using Qt Designer for interface design is completed. Next, we use Qt Designer to lay out the interface of the horizontal layout of the three controls written directly by code in the previous chapter. After running the program, the window is shown in the figure below:
There is a very important skill here, which is to set the attributes of Layout. The attributes of horizontal layout are as follows:
As shown in the figure above, layoutName is the variable name of the horizontal layout. This variable name can be used directly in the code and represents the horizontal layout control; the four attributes of layoutLeftMargin, layoutTopMargin, layoutRightMargin, and layoutBottomMargin are the size of the control distance boundary in the horizontal layout. ;layoutSpacing is the distance between controls in the horizontal layout; layoutStretch is the space ratio allocated from left to right for each control in the horizontal layout; layoutSizeConstraint is the space size constraint rule for the horizontal layout. Next, we set the layoutStretch property to 1, 3, 6 to see the effect of the interface, as follows:
When you zoom the window, you will find that the proportion of space occupied by the three controls in the window is allocated according to the 1:3:6 we set. This technique will greatly optimize your interface and make the layout more reasonable.
With the above skills, we can play freely and make the interface more complicated. The following is a simple adder I designed, and the window after running is as follows:
3. Summary
This chapter uses Qt Designer for interface design, explains the drag and drop of controls, then performs horizontal layout, and finally designs a relatively complex "simple adder". In the next chapter, we will take this "simple adder" as an example to learn how to program and use the control. After entering the addend in the interface, click the "Calculate" button to get the result and display it.