Qt Application Development Framework - Quick Start

1. Qt introduction and installation

Qt is a cross-platform C++ graphical user interface application development framework developed by The Qt Company in 1991. It can develop GUI programs as well as non-GUI programs such as console tools and servers. Qt is an object-oriented framework. Using a special code generation extension (called the Meta Object Compiler (moc)) and some macros, Qt is easily extensible and allows true component programming.

Qt use effect
Qt download address

https://download.qt.io/

Enter the archive->qt directory in turn, and install the latest version. There may be some mysterious problems in the old version.

If the download speed is not good, you can go to the mirror download of the University of Science and Technology of China

• University of Science and Technology of China: http://mirrors.ustc.edu.cn/qtproject/

2. Introduction to QtCreator

After installation, find QtCreator in the corresponding directory. QtCreator is the official IDE of Qt. Those who use the Qt framework to develop graphical interfaces
can create, open, and edit projects in QtCreator.
A project generally consists of the following parts

• config file.pro
• header file.h
• source file.cpp
• QML file.ui
• resource file.prc
  

3. Introduction to QtDesigner

QtDesigner is a tool that comes with Qt to design the ui interface. Click the ui file automatically generated by the project to enter. QtDesigner includes the following main areas

• Central editing area: what you see is what you design, and visual design is realized by dragging the left control
• Left control area: There are various controls in it, which basically include the basic controls required by a visual application. Of course, other controls developed by third-party companies can also be introduced. The controls are the components that constitute the entire visual interface.
• Hierarchical area on the right: It can clearly display the hierarchical relationship between controls, and can also help us quickly lock to the controls that need to be operated.
• Right property setting area: Here you can set all properties of the corresponding control, such as the font, style, size, color, etc. on the control

After clicking the small hammer in the lower left corner, that is, the build button, QtDesigner will translate the current interface design, that is, the ui file, into an XML file. As shown in the figure,
this XML file will be translated by QtCreator. The whole process of generating
the whole process through the setupui function in the function is actually to directly generate the code for some operations of QtDesigner , which greatly saves our time and energy for developing GUI interface in pure C++

. Then write logic in the background, which is often referred to as QML and C++ interactive development

Access and Manipulate Controls
After the construction is complete, we can operate the controls in the background and change their settings, as shown in the figure

//清除AID，BID，CompanyID，SupermarketID的子项
ui->AID->clear(); 
ui->BID->clear();
ui->CompanyID->clear();
ui->SupermarketID->clear();
//遍历添加子项
for(int i=1;i<=CompanySum;i++)
{
    
    
    ui->AID->addItem(QString::number(i));
    ui->BID->addItem(QString::number(i));
    ui->CompanyID->addItem(QString::number(i));
}
for(int i=1;i<=SupermarketSum;i++)
{
    
    
    ui->SupermarketID->addItem(QString::number(i));
}

The effect is as shown in the figure

4. Qt signals and slots

The existing demand is that the interface has been designed, how to implement basic operations, such as clicking the setting button to set the internal information of the application. This introduces the concept of signals and slots in Qt. Each control is an object in Qt, and each object has a signal and a slot. When the properties inside the control are changed, a signal will be broadcast and tied to it. After the specified slot receives the signal, it will perform the corresponding operation. The
connect function
, as the name suggests, is the function that implements the connection between the signal and the slot. You can see the detailed explanation of connect in the Qt help document.

connect demo: After the button is clicked

Five parameters to call the test function connect

1. the object that emits the signal
2. Signal information sent, identified by SIGNAL
3. object receiving the signal
4. The slot function called after receiving the signal, marked with SLOT
5. configuration information

At the same time, QtDesigner provides a relatively simple binding method. In the QtDesigner interface menu bar, the edit option selects the edit signal and slot , and

the corresponding function is added to the slot interface for binding. The blue part of the figure is the already bound function

. Slot function settings
①The slot function needs to be declared in the header file using slots

②The corresponding function is implemented in the source file

At this point, you have completed the Qt Quick Start, you can develop actual combat, and you can explore and learn in development~