Qt Tutorials for Beginners 4: How to Build Your First Qt GUI Widget Application

TL;DR

Build your first Qt GUI widget application by selecting File, New File or Project, Application, and Qt Widget Application in Qt Creator. The wizard generates a MainWindow class and matching header, source, and .ui files, while the designer lets you add widgets and connect a button’s clicked signal to close the application. Read on for the project structure, generated code, and designer workflow.

Transcript

hello guys welcome to the next video on QT tutorial for beginners in the last video I have shown you how you can create your first QT application using your QT Creator IDE and this was the project we have created last time so I'm going to just close this project and this time we are going to create a new uh application using the GUI application wid... Read More

Key Insights

• A Qt Widget Application is created through File, New File or Project, then selecting Application and Qt Widget Application, entering a project name such as first GUI, and clicking next twice before finishing the wizard.
• The wizard's class information page defaults the window class name to MainWindow, and the header and source file names automatically follow that class name, though both can be edited independently in that same screen.
• The .pro project file lists everything the build needs: it includes the core and GUI libraries by default, sets the target to the project name, sets the template to app for a GUI application, and lists sources, headers, and forms.
• Adding files to a Qt project means adding them to fields in the .pro file: SOURCES plus equals main.cpp, HEADERS plus equals mainwindow.h, and FORMS plus equals mainwindow.ui for the user interface file.
• The main.cpp file creates a QApplication object, creates an object of the MainWindow class, calls show on it, and returns a.exec, and any GUI code written between those lines is what gets executed.
• The Q_OBJECT macro invokes the meta object compiler, or moc, which converts the header files into equivalent C++ code and is what makes signals and slots available for the class's widgets.
• The MainWindow constructor initializes the ui pointer with a new MainWindow UI object and calls setupUI, which opens the window, while the destructor deletes that ui pointer object.
• The private ui object in the header is the handle for every widget added in the designer, so all widgets placed on the form are accessed through it.

Questions & Answers

Q: How do you create a Qt Widget Application in Qt Creator?

Open File, choose New File or Project, select Application and Qt Widget Application, and click Choose. Enter a project name such as first GUI, click Next twice, keep or edit the class information, and then click Finish.

Q: What files does Qt Creator generate for a Qt Widget Application?

Qt Creator generates a project file, main.cpp, source and header files for the window class, and a .ui form file. With the default MainWindow class, these include mainwindow.cpp, mainwindow.h, and mainwindow.ui.

Q: Can you rename the MainWindow class and its generated files?

Yes. The class information page uses MainWindow by default, and the header and source filenames initially follow that class name. You can change the class name or edit the header and source filenames independently before finishing the wizard.

Q: What does the .pro file contain in a Qt project?

The .pro file includes the core and GUI libraries, identifies the project target, and sets the template to app for the GUI application. It also lists source files under SOURCES, header files under HEADERS, and interface files under FORMS.

Q: What does main.cpp do in a Qt GUI application?

main.cpp creates a QApplication object and an object of the generated MainWindow class. It calls show on the window object to display it and returns a.exec to run the application.

Q: Why does a Qt MainWindow class use the Q_OBJECT macro?

The Q_OBJECT macro works with Qt’s meta object compiler, or moc, which converts header information into equivalent C++ code. In the tutorial, it enables the class and its widgets to use Qt signals and slots.

Q: How do you add and rename a push button in Qt Designer?

Open mainwindow.ui and drag a push button onto the designer canvas. Change its object name from a default such as pushButton or pushButton_2 to a name such as pushButtonClose, and edit its visible text by double-clicking the button or changing the text property.

Q: How do you make a push button close the Qt application?

Switch Qt Designer to edit signal and slot mode, then drag from the push button and release to open the configure connection dialog. Pair the button’s clicked signal with close so pressing it closes the application.

Summary & Key Takeaways

• The project is created by choosing File, New File or Project, then Application and Qt Widget Application, naming it first GUI, and stepping through the wizard. The class information page shows MainWindow as the default window class name, and the header and source file names mirror it, though all three can be renamed before finishing.

• The .pro file declares the core and GUI libraries, the target name, the app template, and the lists of sources, headers, and forms. main.cpp builds a QApplication, instantiates the window class, calls show, and returns a.exec. The header inherits from QMainWindow, declares the Q_OBJECT macro, a constructor, a destructor, and a private ui object.

• Double clicking mainwindow.ui opens the designer, where widgets are dragged onto the window. A push button gets a default object name such as pushButton, with a second one named pushButton_2, and the name can be changed to something like pushButtonClose. Button text is edited by double clicking the button or through the text property.

• Running the application compiles the code and shows the window with the button, plus a default status bar at the bottom and a toolbar at the top that can be dragged and repositioned anywhere in the main window. Switching the designer to edit signal and slot mode, then dragging from the button and releasing, opens the configure connection dialog where clicked is paired with close so pressing the button closes the application.