[Qt] 2.3 use the Qt designer to create a dialog box, 2.3qt

[Qt] 2.3 use the Qt designer to create a dialog box, 2.3qt

After installing Qt OpenSource, you can find these items in the Start Menu.

[Designer] is a program used to design the window interface. So now you can use it to design a dialog box. In [Qt Creator], you can also design the interface in [design.

Open [Designer]. By default, [New Form] is displayed. Select [Dialog without Buttons]. A Dialog box with nothing is created.

[Dialog with Buttons Bottom] and [Dialog with Buttons Right] will create a Dialog box containing two Buttons: [OK] and [cancel, the buttons are located in the lower-right corner of the dialog box or in the upper-right corner of the dialog box.

After clicking create, you can design the interface for this dialog box.

For those who have used Visual Studio or other programming tools, this design interface is quite familiar. The leftmost column is the most commonly used toolbar.

 

I made the dialog box like this:

You can modify the name of each component and the Dialog box, and select Dialog in object viewer ].

In the Attribute Editor, view the properties of the dialog box and change the object name to the desired name. Similarly, you can also modify [label], [pushButton], and [pushButton_2.

Finally, I changed it to this:

Save the file as a. ui file.

 

Open Qt Creator and create a new project.

This is just a simple creation dialog box. After the project is created, I create the mainwindow. h] [mainwindow. cpp and mainwindow. ui] These three files are deleted because they are not required in this test.

Right-click Project name, click Add new file, select C ++ Class, write the Class name, and create the project. The class I created is called MyDialog ].

To use the dialog box we just designed, we need to add the. ui file to the project. Right-click Project name, click Add existing file, select the. ui file in the dialog box, and click OK.

In mydialog. h, the Code is as follows:

Lines 5th and 7: the header file corresponding to the mydialog. ui file is called [ui_mydialog.h], which is certain. This header file saves all the definitions of the "MyDialog" dialog box we designed. The [MyDialog] class we define must inherit from the [QDialog] and [Ui: MyDialog] classes.

After building this project, you can go to the header file "ui_mydialog.h. You will find that the class "MyDialog" in this file inherits from "Ui_MyDialog" and the "MyDialog" class exists in the namespace "Ui", so you need to use this class, you need to do this: Ui: MyDialog.

Row 15th: This is a very convenient way of writing. When it comes to the source file, it will explain how useful this method is.

 

Other lines should not be clear again. Now let's look at the source file code:

Row 6th: a function called [setupUi] is called to use the this pointer as a parameter.

This function is a public function in the [Ui: MyDialog] class. It is used to initialize the parts of the dialog box and the attributes we have set. In fact, it is equivalent to our own initialization parts.

At the same time, the setupUi function automatically connects the slots that conform to the [on_object_signal] naming format with the corresponding [object] [signal ()] signal.

This means that the [on_helloButton_clicked] slot will establish a connection in the [setupUi] function:

Therefore, this saves us the need to call the [connect] function to establish a connection.

 

The this pointer parameter passed in by the setupUi function.

The [Ui: MyDialog] class is not a class inherited from [QDialog]. It only saves all the parts we placed in [Qt Designer.

Then, instantiate these parts in the setupUi function and set the attributes we set in the Qt designer.

[SetupUi] The parameter required by the function is of the QDialog * type. When the function instantiates a component, the parent object of the component is specified as this parameter, that is, the component starts to be instantiated, they are already in the dialog box where this parameter is located. It also explains the reason for the setupUi function to pass this pointer.

It automatically moved all the parts and attributes we placed in [Qt Designer] to the [MyDialog] class we wrote.

 

Other code has been mentioned before, so it should be well understood ~!

After the MyDialog instance is created in the main function, it is displayed.

The result is as follows:

 

In addition, the components are laid out in [Qt Designer.

This is the toolbar used for layout.

1st: horizontal layout, equivalent to QHBoxLayout.

2nd: vertical layout, equivalent to QVBoxLayout.

3rd: uses a horizontal splitter layout, which is equivalent to creating a horizontal QSplitter object.

4th: the vertical splitter layout is used to create a vertical QSplitter object.

5th: grid layout, equivalent to QGridLayout.

6th: layout in the form layout, equivalent to QFormLayout.

7th: Break the layout.

8th: adjust the size.

 

It is relatively simple, so you can try these layout methods on your own.

For the QSplitter class, it is used to split a window and can adjust the size of each subwindow at will.

You can write the following code:

Then try to run it and you will know what function it is.

Functions used:QSplitter ::QSplitter(Qt: OrientationOrientation,QWidget*Parent= 0)

Function Description: Construct a separator. Orientation Parameters include Qt: Horizontal and Qt: Vertical, which indicate the direction of the separator.

 

 

 

 

After about three months of study, I have finished learning C ++ GUI Qt 4. I have been doing exercises myself recently. I am about to graduate soon and will be much more busy. Therefore, updates are slow. But of course we can ensure that there are at least two articles per month ~ Keep writing blogs.

In fact, I don't have any confidence to write Qt, because I am afraid that I may have a wrong understanding of this knowledge. If there are any mistakes, please refer to them more. Thank you ~