Qt Designer-that is, Qt designer, is a visual graphical interface editor developed by QT project. Through the designer, you can easily create the image interface file *.ui, and then apply the ui file to the source code, so that what you see is what you see As a result, the design of the interface becomes very simple. The following introduces the simple use of Qt Designer and how to apply the ui file to the Qt program code.
Qt Designer editing UI
First open Qt Designer, you can enter designer in the Qt command line, or open it after finding it in the menu. Open Yes, a dialog box for creating a new form will pop up by default, as shown in the figure below.
Five window type templates are provided on the left side of the dialog box. The first three are dialog windows, which are button at the bottom, button at the right and no button. The fourth is “Main Window”, which is the main window interface. The main window has the most abundant functions, including menu bar, toolbar, status bar, and central components, and docking/floating windows can be added. This is more complicated and will be explained in the next chapter. The fifth is the simplest common “Widget” interface, which is used as the main interface window in this section. After selecting “Widget”, click the “Create” button to create a new form of this type, as shown in the figure below:
Above the designer is the menu bar and tool bar. In the tool bar, you need to pay attention to the four buttons in the middle, which refer to the four editing modes of the graphical interface, as follows:
①Edit widgets: Drag and drop widgets (widgets) for the window, edit widget layout, etc. ②Edit signal/slot: Some actions of the user on the graphical interface will trigger the signal of the window or control, and the processing function corresponding to the signal is the slot function. This mode realizes the relationship between the two. ③Edit partner: The most common is to set the label control as a partner of other controls (such as edit boxes), the text of the label control can indicate the name/function/purpose of the associated control, and you can easily set shortcut keys. ④ Edit Tab order: In the window, the user can press the Tab key to select and enter each control in turn. This mode is to edit the order in which each control is selected.
Only the first “edit widget” mode is used here, and the others will be discussed later.
The “Widget Box” on the left of the designer is a control (or component) toolbox, which contains a wealth of draggable Qt controls. The form marked with a dot matrix in the middle is our new interface form. On the right side of the designer are three toolbox windows: the object viewer records which controls are in the current form, and the name and class name of each control object will be listed. You can see that the default object is Form, and its class name is QWidget; The second one on the right is the property editor, which is used to edit the properties of the form or control, such as object name, window title, window size and so on. The third toolbox on the right is more complicated. It is tabbed and has three toolboxes: “Resource Browser”, “Action Editor” and “Signal/Slot Editor”. These will be discussed later, this section Temporarily unavailable.
Dragging and dropping controls is the easiest. Here is a description of dragging a label control to the main interface. In the “Widget Box” on the left, drag the slider to the bottom, or use the mouse wheel to scroll down to the bottom, you can see the “Label” control in the “Display Widgets” category, which is the QLabel in the previous section. Move the mouse pointer to “Label”, hold down the left button, and then drag it to the main interface window to the upper left position of the main interface window, then release the left mouse button to add a label to the main interface window. Created a label control. After adding, the interface form is as shown in the figure below:
In the figure above,
In the object viewer, there will be an extra line of “label” and “QLabel” at this time, which is the name and class name of the label object.
In the property editor, you can see the words “label: QLabel”, indicating that the label property can be set at this time. There are many attributes of label, you can use the mouse wheel to scroll to view many attributes, so I won’t enumerate them one by one. The most critical attributes are automatically displayed in bold, there are three:
objectName: object name, which determines the pointer variable name of this object in the C++ code in the future, and the function of this object can be called after using this object name. The object names in the ui file are all pointer variable names, because they are all created with new.
geometry: The geometric figure occupied by the control display is the rectangular area displayed. This attribute is controlled by four sub-attributes. Click “+” to expand and see X, Y, width, and height. Set these four values to control The position where the control is displayed and the size of the control.
text: The displayed text, the label control is specially used to display text, this is its main function.
The name of the label control object will not be modified, because there is only one. We set the four subproperties of geometry: X to 10, Y to 10, width to 200, and height to 40
One feature of QT is that it supports HTML when editing text content for controls, such as the above Label control, click the “…” button in the text in the property dialog box to open the text dialog box.
In the text you want to edit, you can add HTML tags before and after the text to display different colors and fonts, etc. Make a text ui file and save it. The file name is *.ui.
The ui file is actually a text file in standard XML format (you can open it with Notepad), which needs to be converted into the ui_*.h header file available in the project through the uic tool. This header file is the real available C + + code. Next we start the conversion:
Enter the QT command line, enter the saved directory, and enter the command “uic filename -o ui_filename”.
Open the converted header file and open it to see.
/********************************************** ***********************************
** Form generated from reading UI file 'hello.ui'
**
** Created by: Qt User Interface Compiler version 5.6.0
**
** WARNING! All changes made in this file will be lost when recompiling UI file!
***************************************************** *******************************/#ifndef UI_HELLO_H
#define UI_HELLO_H#include <QtCore/QVariant>
#include <QtWidgets/QAction>
#include <QtWidgets/QApplication>
#include <QtWidgets/QButtonGroup>
#include <QtWidgets/QDialog>
#include <QtWidgets/QDialogButtonBox>
#include <QtWidgets/QHeaderView>
#include <QtWidgets/QLabel>QT_BEGIN_NAMESPACEclass Ui_Dialog
{
public:QDialogButtonBox *buttonBox;QLabel *label;void setupUi(QDialog *Dialog){if (Dialog->objectName().isEmpty())Dialog->setObjectName(QStringLiteral("Dialog"));Dialog->resize (400, 300);buttonBox = new QDialogButtonBox(Dialog);buttonBox->setObjectName(QStringLiteral("buttonBox"));buttonBox->setGeometry(QRect(30, 240, 341, 32));buttonBox->setOrientation (Qt::Horizontal);buttonBox->setStandardButtons(QDialogButtonBox::Cancel|QDialogButtonBox::Ok);label = new QLabel(Dialog);label->setObjectName(QStringLiteral("label"));label->setGeometry (QRect(10, 10, 200, 40)); retranslateUi(Dialog); QObject::connect(buttonBox, SIGNAL(accepted()), Dialog, SLOT(accept())); QObject::connect(buttonBox, SIGNAL (rejected()), Dialog, SLOT(reject()));QMetaObject::connectSlotsByName(Dialog);} // setupUivoid retranslateUi(QDialog *Dialog){Dialog->setWindowTitle(QApplication::translate("Dialog" , "Dialog", 0));label->setText(QApplication::translate("Dialog", "<h1>Hello World</h1>", 0));} // retranslateUi} ;namespace Ui {class Dialog: public Ui_Dialog {};
} // namespace UiQT_END_NAMESPACE#endif // UI_HELLO_H