Use the visual design form GUI program | more challenges

“This is the second day of my participation in the Gwen Challenge.

Qt provides the Visual interface design tool Qt Designer, as well as the UI Designer built into Qt Creator. Designing UI forms visually can greatly improve the productivity of GUI application development.

Visually design forms with UI Designer

Qt Creator click the menu item “File” → “New File or Project…” In the dialog box that appears, select the “Qt Designer Form” in the “Qt” group (as shown). This will create a simple Form file (.ui file).

Click on the “Choose…” After the button, the window template selection interface as shown in the figure will appear. There are three main types of form templates.

· Dialog template, a form based on the QDialog class, has the characteristics of general Dialog boxes, such as modal display, return value, etc.

· MainWindow template, a form based on QMainWindow class, with features of MainWindow, including Main menu bar, tool bar, status bar, etc.

· Widget template, a form based on the QWidget class The QWidget class is the base class for all interface components. Interface components such as QLabel and QPushButton are inherited from the QWidget class. The QWidget class is also a parent of QDialog and QMainWindow, and forms created based on the QWidget class can be run as standalone Windows or embedded in other interface components for display.

Select the Widget template. After clicking the “Next” button, in the dialog box that appears, set the file name to formHello. UI, save the file to the directory Demo2_2, and then follow the wizard to complete the creation. After creating the form, you can visually design the form in the UI Designer built into Qt Creator. The following image shows the form after placing labels and buttons on it and setting various properties.

· Component panel. On the left is a panel of interface design components, which are grouped into groups such as Layouts, Buttons, and Display Widgets.

· The middle area is the form to be designed. To drop a component on the form, drag one from the Components panel and drop it on the form. For example, place a Label component and a PushButton component on a form.

· The Action Editor and Signals Slots Editor are located below the design form. The Action editor is used to design actions, and the Signals Slots editor is used to visually associate Signals with Slots, which we’ll cover later.

· Object Inspector. At the top right of the window is the Object browser, which displays the layout and inclusion relationships between the components on the form in a tree view with two columns showing the objectName and class name of each component.

· Property Editor. In the lower right corner of the window is the property editor, which displays various properties of a selected component or form and their values. You can modify the values of these properties in the property editor.

There are forms design mode and layout management toolbars at the top of the main window, as well as a toolbar at the far left, which will be described in more detail later when we cover the use of QtCreator.

Clicking a component on the design form displays its properties in the property editor and allows you to modify its properties. For example, the following image shows the contents of the property editor after selecting the label component placed on the form.

Compile the UI file into a py file

Use the UI Designer to design the form and save it as a file called FormHello. UI. To use the form in Python, use the PyQt5 tool pyuic5.exe to compile the UI file into the corresponding Python program file.

The pyuic5.exe program is located in the Scripts subdirectory of the Python installation directory, such as “D:\Python37\Scripts”. This PATH is automatically added to the system’s PATH environment variable when installing Python, so you can execute the pyuic5 command directly.

In a Windows CMD window, use the CD command to switch to the directory where the formHello. UI file resides, and then use the pyuic5 command to compile and convert it to a Python file. For example, assuming the file formHello. UI is saved in the directory “G:\PyQt5Book\Demo\chap02\demo2_2”, execute the following commands in sequence:

Pyuic5 compiles the file formHello. UI and outputs it as ui_formHello.py. The file name of the compiled output can be arbitrarily specified. Adding “ui_” before the original file name is a personal naming convention to indicate that the ui_FormHello. Py file is converted from the FormHello.