QT from getting started to giving up------Making QT interface

QT from getting started to giving up (1) ------ Making QT interface

Create project

Click New Project
Insert image description here
Click Application, QT Widgets Application, and Choose in the picture below in sequence

Select the project name and storage path according to your own needs.

The path must not contain Chinese characters

Say important things three times.

Insert image description here
Select MinGW

The base class must be QWidget

Insert image description here
And then keep going to the next step…

The creation is completed. The project we created is as shown below
Insert image description here
Click forms, and then double-click the ui file to enter the ui editor.

After entering the ui editor, there are five parts:

component interface
Form to be designed
Layout and interface design toolbar
object browser
Property Editor

Make xxx login interface

If you dislike the form being too small, you can click geometry in the property editor and set the height and width of the form.
Insert image description here
The component that holds text, pictures, and Gifs is called qlabel, under Display Widgets.

The use of the component is very simple, just drag it directly onto the form to be designed.
Insert image description here
You can click font->point size in the attribute editor to modify the text size in the qlabel.

Click alignment->horizontal and select the qlabel text alignment. The default is left alignment. We select AlignHCenter to align in the center.

Remember to select the qlabel component before modifying.
Insert image description here

The input box for entering the account number and password requires a line of text input box,

This component is called Line Edit and is placed under Input Widgets. The text box cannot wrap lines.
Insert image description here
The login and registration buttons use the Push Button component. This component is under Buttons: a>

Insert image description here
The final designed interface looks like this.

Compile and run the program:

Ctrl+R or the arrow in the lower left corner
Insert image description here
The running results are as follows:

Insert image description here Select the password input box component, click echoMode->Passwd in the property editor, and select the ciphertext display of the password.

Insert image description here

Insert image description here
A simple xxx login interface is completed.

Modify control name

In order to make it easier to analyze the code, we need to change the name of the control.

Before the modification, the control name was not easy to analyze:

Insert image description here
After modification, you will know what the space is for just by looking at the name.