Software testing | QtDesigner configuration and use

Introduction

In the previous article, we introduced the installation and configuration of the PyQt5 environment and installed the Qt tools. In this article, we will introduce how to use QtDesigner of Qt tools.

Getting started with QtDesigner

1. Open our project
2. Select: from the top menu bar Tools -> ExternalTools -> QtDesigner, and the following QtDesigner running window will pop up, as shown below:

The QtDesigner interface is as follows:

3. New form

QtDesignerThe "New Form" dialog box may automatically pop up when running for the first time. You can also select: "File -> New" through the menu bar or use the shortcut key "Ctrl+N" to evoke the "New Form" dialog box .
Select "MainWindow" from the left menu of the "New Form" window to create a new graphics window, as shown below:

4. Design a new interface

QtDesignerThe user interface is very intuitive. The main interface is divided into three parts: left, middle and right. On the left are various alternative control objects. The "Object Viewer" on the upper right displays the tree structure of the control. The "Property Editor" on the lower right ” displays various properties of the control, and the middle part is used to display the designed interface. Next we add several graphics controls to the new graphics window:

Add button

Select the button from the Button on the left control bar PushButton, click the button with the left mouse button PushButton, move the mouse and PushButtondrag the button to any position in the new graphics window in the middle, release the left mouse button, and the button will be generated at the position of the graphics window. A PushButtonbutton object, as shown below:

Click the PushButton button object in the graphics window with the left mouse button and drag the button to adjust the position of the control. For other controls, you can also adjust the position by dragging the mouse.

When the PushButton button object is selected with the mouse, 8 blue dots will appear on the border around the control, indicating that the control is selected. At this time, the properties of the object can be edited and modified in the "Property Editor" on the right, for example

• Modify the height of the PushButton object to 50 and the width to 150
• Change the "QAbstractButton->text" of the PushButton object to "PLAY";

Add text control

• InputWidgetSelect the button from the left control bar TextEdit, select the button with the left mouse button TextEditand drag it to the new graphics window. Release the left mouse button to generate a TextEdit object in the graphics window.
• Select the TextEdit object with the mouse, and you can edit and modify the object's properties in the "Property Editor" on the right, for example:
  • Modify the height of the TextEdit object to 200 and the width to 300;
  • The displayed content of the TextEdit object can be edited in html, markdown and other formats. You can also double-click the TextEdit object to bring up the html editing dialog box and enter the content you want to display.

In the above steps, we have achieved the creation and editing of a basic page.

5. Save the designed graphical interface as .uia file

Use the shortcut keys Ctrl+sto save the file. We name the file qt_demo1.ui. The default project setting of this article also saves the .py file in the \program subdirectory under the current Project path. The graphical interface file can be directly imported during application programming.
If the file saving paths set by PyChrm or QtDesigner are different, pay attention to setting and using the correct path when importing the graphical interface file.