In the last chapter, we created a new project step by step from the beginning and ran the window. This chapter officially entered the road of Qt interface programming. In this chapter, we first write the interface with code, place simple controls, and then use code for layout; then use Qt Designer for control placement and interface layout, which makes the design of complex interfaces easier.
1. Composition of the main window
For interface design, the Qt window is equivalent to a canvas on which designers can draw freely. According to "international practice", we first implement a "Hello World" character display as an entry demo.
In the previous chapter, the window for the newly created blank project to run directly is as follows:
This window seems to be empty, but it actually hides a mystery. There are several default controls on the window, as shown in the figure below:
As can be seen from the diagram above, the upper part of the window is the menu bar, the lower part is the status bar, and the large area in the middle is the central control. The menu bar is where the menu is placed; the status bar can display some operation actions or information; the central control is what we call the "canvas", which is used to place controls and layouts.
2 Place controls using code
We don't care about the menu bar and status bar for the time being, we will play with this later. The central control area is where we place the controls, and we write code to place a "Hello World" character in the central control area.
Before writing the code, let's look at the contents of the mainwindow.cpp file automatically generated by Qt:
#include "mainwindow.h"
#include "ui_mainwindow.h"
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
ui->setupUi(this);
}
MainWindow::~MainWindow()
{
delete ui;
}
The file has three parts by default, which are header file inclusion, constructor, and destructor. We place a label for displaying strings in the constructor. The control is QLabel (the header file that includes QLabel before use), And set the text of the label to "Hello World", the code is as follows:
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QLabel> // 包含QLabel的头文件
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
ui->setupUi(this);
/* 实例一个QLabel对象指针label，
* 并将中心控件的指针（this->centralWidget()返回中心控件的指针）传入QLabel的构造函数，
* 表示QLabel的父类是中心控件，即QLabel会显示在中心控件区域 */
QLabel *label = new QLabel(this->centralWidget());
// 设置标签文本
label->setText("Hello World");
}
MainWindow::~MainWindow()
{
delete ui;
}
The above added code gives comments, run the program, and the displayed window is as follows:
When you see the "HelloWorld" string appearing in the window, congratulations, you have realized the first interface program of Qt.
It must be pointed out here that the control of the instance in Qt programming generally uses pointer variables, so that the control will not end with the end of the life cycle of the function. If you declare the QLabel variable in the constructor like this:
QLabel label(this->centralWidget());
label.setText("Hello World");
Then you will find that the window is still empty after running, and the string you want is not displayed. Because the label variable is a local variable of the constructor, when the constructor finishes running, the label variable is also released. Using a pointer variable, as long as the pointer is not artificially released, the pointer variable will always exist.
Although the "Hello World" string is displayed in the window, you may wonder how to place this string elsewhere in the window. Before studying the position where the string is placed, we must first know how the coordinates of the window are specified. Let's see what the coordinate system of the Qt window looks like, as shown in the figure below:
It can be seen from the figure that the coordinates of the upper left corner of the Qt window are (0,0), going to the right is the positive direction of the X-axis, and going down is the positive direction of the Y-axis. So, how big is this window, we can use the function to get it, and then display them on the label, see the following code:
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QLabel> // 包含QLabel的头文件
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
ui->setupUi(this);
// 获取窗口宽度
int width = this->width();
// 获取窗口高度
int height = this->height();
QLabel *label = new QLabel(this->centralWidget());
// 显示出窗口宽度和高度
label->setText(QString::number(width) + " " + QString::number(height));
}
MainWindow::~MainWindow()
{
delete ui;
}
In the above code, the width and height of the window are first obtained through the two functions this->width() and this->height(), and then displayed in the label. Among them, QString::number(width) and QString::number(height) convert the value into a string, because the setText() function can only pass in the string variable QString. Run the program, the displayed window is as follows:
As can be seen from the string displayed in the window, the width of the window is 800 pixels, and the height is 600 pixels. Next, we will change the position of the "Hello World" label, and modify the code as follows:
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QLabel> // 包含QLabel的头文件
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
ui->setupUi(this);
QLabel *label = new QLabel(this->centralWidget());
// 设置文本
label->setText("Hello World");
// 设置标签的位置和大小
label->setGeometry(0, 300, 80, 30);
}
MainWindow::~MainWindow()
{
delete ui;
}
The function setGeometry(int ax, int ay, int aw, int ah) of QLabel is used here. This function has four parameters, which are the x-axis coordinates, y-axis coordinates, the width of the control, and the height of the control. Here we set the position of the "Hello World" label to (0,300), the width of the label to 80, and the height to 30. It should be noted here that the starting coordinates of all controls in Qt are the upper left corner of the control, and the placement position is also based on the (0,0) coordinates of the control as the reference point. For example, the "Hello World" label is placed here The (0,300) position of the window, to be precise, places the (0,0) coordinate point of the label at the (0,300) position of the window. Run the program, the displayed window is as follows:
The "Hello World" string is placed where we set it, and the program runs successfully!
3 Use code for interface layout
We place three controls on the interface, namely the label control QLabel, the line input control QLineEdit and the button control QPushButton, the code is as follows:
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QLabel> // 包含QLabel的头文件
#include <QLineEdit> // 包含QLineEdit的头文件
#include <QPushButton> // 包含QPushButton的头文件
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
ui->setupUi(this);
// 标签控件
QLabel *label = new QLabel(this->centralWidget());
// 设置标签文本
label->setText("Hello World");
// 设置位置和大小
label->setGeometry(0, 0, 80, 25);
// 行输入控件
QLineEdit *lineEdit = new QLineEdit(this->centralWidget());
// 设置位置和大小
lineEdit->setGeometry(100, 0, 80, 25);
// 按钮控件
QPushButton *pushButton = new QPushButton(this->centralWidget());
// 设置按钮文本
pushButton->setText("我是按钮");
// 设置位置和大小
pushButton->setGeometry(200, 0, 80, 25);
}
MainWindow::~MainWindow()
{
delete ui;
}
Run the program, the displayed window is as follows:
It can be seen that the three controls are arranged horizontally in the window according to the position and size given by us, because we have given the absolute position and size of the control, so the position and size of the control will not change with the size of the window Automatically change, sometimes the window may not display all the controls, as shown in the following figure:
In order to make the position and size of the control change automatically as the window size changes, so that the control can adapt to the change of the window, we use Qt's horizontal layout control QHBoxLayout. QHBoxLayout is a horizontal layout control. The controls placed in QHBoxLayout will be automatically distributed horizontally, and will automatically change as the size of QHBoxLayout changes. The code is as follows:
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QLabel> // 包含QLabel的头文件
#include <QLineEdit> // 包含QLineEdit的头文件
#include <QPushButton> // 包含QPushButton的头文件
#include <QHBoxLayout> // 包含QHBoxLayout的头文件
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
ui->setupUi(this);
// 标签控件
QLabel *label = new QLabel;
// 设置标签文本
label->setText("Hello World");
// 行输入控件
QLineEdit *lineEdit = new QLineEdit;
// 按钮控件
QPushButton *pushButton = new QPushButton;
// 设置按钮文本
pushButton->setText("我是按钮");
// 水平布局控件
QHBoxLayout *hBoxLayout = new QHBoxLayout(this->centralWidget());
hBoxLayout->addWidget(label);
hBoxLayout->addWidget(lineEdit);
hBoxLayout->addWidget(pushButton);
}
MainWindow::~MainWindow()
{
delete ui;
}
Run the program, the displayed window is as follows:
It can be seen that the three controls are horizontally distributed in the window, filling the abscissa of the window. When we shrink or enlarge the window, the size and position of the control will change with the size of the window, so that the control can adapt to the window size effect.
Of course, if there is a horizontal layout control, there will be a vertical layout control. Let's change the above QHBoxLayout to QVBoxLayout to see the effect. The code is as follows:
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QLabel> // 包含QLabel的头文件
#include <QLineEdit> // 包含QLineEdit的头文件
#include <QPushButton> // 包含QPushButton的头文件
#include <QVBoxLayout> // 包含QVBoxLayout的头文件
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
ui->setupUi(this);
// 标签控件
QLabel *label = new QLabel;
// 设置标签文本
label->setText("Hello World");
// 行输入控件
QLineEdit *lineEdit = new QLineEdit;
// 按钮控件
QPushButton *pushButton = new QPushButton;
// 设置按钮文本
pushButton->setText("我是按钮");
// 垂直布局控件
QVBoxLayout *vBoxLayout = new QVBoxLayout(this->centralWidget());
vBoxLayout->addWidget(label);
vBoxLayout->addWidget(lineEdit);
vBoxLayout->addWidget(pushButton);
}
MainWindow::~MainWindow()
{
delete ui;
}
Run the program, the displayed window is as follows:
It can be seen that the three controls are distributed in the vertical direction. When the window is reduced, the size and position of the three controls will change with the change of the window. For example, after the window is reduced, the effect is as follows:
Has the window become compact and more beautiful?
QHBoxLayout and QVBoxLayout can be nested with each other. In addition to these two layout controls, Qt also has a grid layout control QGridLayout and a form layout control QFormLayout. You can understand it yourself and use it when you need it.
4 Summary
In this chapter, we use code to place several controls, and use QHBoxLayout and QVBoxLayout layout controls to lay them out horizontally and vertically. This chapter puts controls and layouts by writing codes, just let us get a preliminary understanding of Qt interface programming. For complex interface design, I recommend you to use Qt Designer, the interface design software that comes with Qt, which can greatly simplify the interface design. The workload is low, and the design logic is clear and easy to maintain, the interface is intuitive, and what you see is what you get. But if it involves dynamic modification of the size and position of the control, you still have to use the code to program directly.