Detailed steps and code for using QT to visually design dialog boxes

1. Basic steps to create a dialog box

• Create and initialize child widgets
• Place child widgets in the layout
• Set tab order
• Establish signal-slot connections
• Implement custom slots in dialog boxes

First of all, the first three steps are performed directly through the ui file, and the remaining two steps are implemented through code.

2. Detailed steps for project creation

Create new project

Name the project

 

 Name the class and select the base class as QDialog

[If QDialog is not selected here but the default QMainWindow is selected, it will cause the setupUi function to report an error when running later]

3. Detailed steps for UI visual dialog interface design and implementation

Double-click the gotocelldialog.ui file to open the design interface. The left side is the toolbar, and the right side is the design interface. You only need to drag the components on the left to the interface.

First drag a label, a line editor, a horizontal separator and two buttons onto the interface

Then modify the text of the Label component to——&Cell Location:

Modify the properties of the first button, change its text to --OK, its objectName to --okButton, its enable property to false, and its default property to --true

 

Modify the properties of the second button, change its text to -Cancel, and change its objectName to -cancelButton

Modify the title and name of the entire form - click on the blank area and then look at the properties section

At this point, the component attribute settings are completed.

At this time the interface displays as follows:

The next step is to bind the components and design the layout.

Bind the lable component to the lineEdit component, click "Edit" in the upper left corner - select "Edit Buddies" - click Lable and connect the red arrow to lineEdit - click "Edit" in the upper left corner - select "Edit Widget" That’s it

Design the layout

Select label and lineEdit at the same time - right mouse button - layout - horizontal layout

Select the following three components at the same time - right mouse button - layout - horizontal layout

Select the blank space in the form - right mouse button - layout - adjust size - adjust to the size you want - select the blank space in the form - right mouse button - layout - vertical layout

The completed layout design results are as follows:

 

Set tab order

Click "Edit" in the upper left corner - select "Edit Tab Order" - select according to the order you want.

4. Dialog box implementation

①Initial implementation - use the form designed in UI, create QDialog object, pass the object to the form, run

You only need to write the code in the main.cpp file

#include "gotocelldialog.h"

#include <QApplication>
#include<QDialog>
#include"ui_gotocelldialog.h"


int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    //定义窗体、创建QDialog对象、将对象传递给窗体【对话框能展示，但功能没有实现】
    Ui::GoToCellDialog ui;//定义该窗体
    QDialog *dialog=new QDialog;//创建一个QDialog对象
    ui.setupUi(dialog);//把QDialog对象传递给setupUi函数
    dialog->show()
    return a.exec();
}

At this time, the interface designed previously will be displayed, but the button functions and line editor restrictions are not implemented.

②Advanced implementation - define a new class to inherit the GoToCellDialog class initialized by Ui and QDialog and use signals and slots to implement functions

 gotocelldialog.h code [new class definition]

#ifndef GOTOCELLDIALOG_H
#define GOTOCELLDIALOG_H

#include<QDialog>
#include"ui_gotocelldialog.h"

//创建一个新类，让此类同时从QDialog和Ui::GoToCellDialog中继承出来，并且实现前面所涉及的窗体中所需要实现的功能
class GoToCellDialog : public QDialog,public Ui::GoToCellDialog
{
    Q_OBJECT

public:
    GoToCellDialog(QWidget *parent = nullptr);//构造函数
    ~GoToCellDialog();//析构函数
private slots:
    void on_lineEdit_textChange();//实现对OK按钮的启用/禁用
private:
    Ui::GoToCellDialog *ui;
};
#endif // GOTOCELLDIALOG_H

gotocelldialog.cpp code [signal and slot binding and implementation]

#include<QtGui>
#include "gotocelldialog.h"

//构造函数的实现
GoToCellDialog::GoToCellDialog(QWidget *parent)
    : QDialog(parent)
{
    setupUi(this);//初始化窗体

    //设置一个检验器来限制输入的范围  QRegExpValidator内置检验器后面带一个正则表达式
    QRegExp regExp("[A-Za-z][1-9][0-9]{0,2}");//正则表达式
    //允许一个大写/小写字母，后面跟着一个范围为1-9的数字，后面再跟一个0个、1个或者2个0-9的数字
    lineEdit->setValidator(new QRegExpValidator(regExp,this));

    //第一个connect已经通过setupUi自动建立了
    //因为setupUi()函数会自动将那些符合on_objectName_signalName()命名惯例的任意槽与其相应的objectName的signalName()信号连接到一起
    //connect(lineEdit,SIGNAL(textChange(const QString &)),this,SLOT(on_lineEdit_textChange()));
    //accept()槽是QDialog的，其可以将对话框返回的结果变量设置为QDialog::Accept(其值等于1)
    connect(okButton,SIGNAL(clicked()),this,SLOT(accept()));//当点击OK按钮时，触发accept()槽
    //reject()槽是QDialog的，其可以将对话框的值设置为QDialog::Reject(其值等于0)
    connect(cancelButton,SIGNAL(clicked()),this,SLOT(reject()));//当点击Cancel按钮时，触发reject()槽
    //可以利用对话框的结果变量判断用户是否单击了OK按钮
}

//实现对OK按钮的启用/禁用
void GoToCellDialog::on_lineEdit_textChange(){
    //根据行编辑器中是否包含了有效的单元格位置坐标，从而实现对OK按钮的启用或者禁用
    //hasAcceptableInput()用于判断行编辑器中内容的有效性  有效则禁用，无效则启用
    okButton->setEnabled(lineEdit->hasAcceptableInput());
}

GoToCellDialog::~GoToCellDialog()
{
    delete ui;
}

main.cpp code

#include "gotocelldialog.h"

#include <QApplication>
#include<QDialog>
#include"ui_gotocelldialog.h"


int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    //进阶想法——定义新类继承Ui初始化的类还有QDialog并利用信号-槽实现功能
    GoToCellDialog *dialog=new GoToCellDialog;
    dialog->show();
    return a.exec();
}

operation result:

When the text in the line editor does not meet the input requirements, input is not allowed and the OK button is disabled; when the content in the line editor meets the input requirements, the OK button is enabled