一、Qt设计简单实例（Qt5 GUI系列）

目录

一、设计需求

二、实现

（1）Qt Designer实现

（2）代码实现

三、总结

---

一、设计需求

二、实现

（1）Qt Designer实现

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>

namespace Ui {
class Dialog;
}

class Dialog : public QDialog
{
    Q_OBJECT
    
public:
    explicit Dialog(QWidget *parent = 0);
    ~Dialog();
    
private slots:

    void on_countBtn_clicked();

    void on_radiusLineEdit_textChanged(const QString &arg1);

private:
    Ui::Dialog *ui;
};

#endif // DIALOG_H

#include "dialog.h"
#include "ui_dialog.h"
const static double PI=3.1416;
Dialog::Dialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::Dialog)
{

    ui->setupUi(this);
}

Dialog::~Dialog()
{
    delete ui;
}
//检测计算按钮单机信号
void Dialog::on_countBtn_clicked()
{
    bool ok;
    QString tempStr;
    //获取半径
    QString valueStr=ui->radiusLineEdit->text();
    int valueInt=valueStr.toInt(&ok);
    double area=valueInt*valueInt*PI;//计算圆面积
    //设置数据
    ui->areaLabel_2->setText(tempStr.setNum(area));
}
//检测半径输入框内容改变信号
void Dialog::on_radiusLineEdit_textChanged(const QString &arg1)
{
    bool ok;
    QString tempStr;
    //获取半径
    QString valueStr=ui->radiusLineEdit->text();
    int valueInt=valueStr.toInt(&ok);
    double area=valueInt*valueInt*PI;//计算圆面积
    //设置数据
    ui->areaLabel_2->setText(tempStr.setNum(area));
}

效果展示：

（2）代码实现

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>
#include <QLabel>
#include <QLineEdit>
#include <QPushButton>

class Dialog : public QDialog
{
    Q_OBJECT
    
public:
    Dialog(QWidget *parent = 0);
    ~Dialog();
private:
    QLabel *label1,*label2;
    QLineEdit *lineEdit;
    QPushButton *button;
private slots:
    void showArea();
};

#endif // DIALOG_H

#include "dialog.h"
#include <QGridLayout>

//定义PI
const static double PI=3.1416;

Dialog::Dialog(QWidget *parent)
    : QDialog(parent)
{
    //初始化控件
    label1=new QLabel(this);
    label1->setText(tr("请输入圆的半径："));
    lineEdit=new QLineEdit(this);
    label2=new QLabel(this);
    button=new QPushButton(this);
    button->setText(tr("计算"));

    //新建主要布局(此处为栅格布局)
    QGridLayout *mainLayout=new QGridLayout(this);

    //添加控件
    mainLayout->addWidget(label1,0,0);
    mainLayout->addWidget(lineEdit,0,1);
    mainLayout->addWidget(label2,1,0);
    mainLayout->addWidget(button,1,1);

    //槽函数
    //connect(button,SIGNAL(clicked()),this,SLOT(showArea()));
    connect(lineEdit,SIGNAL(textChanged(QString)),this,SLOT(showArea()));
}

Dialog::~Dialog()
{
    
}

/**
 * @brief 显示面积函数
 */
void Dialog::showArea()
{
    bool ok;
    QString tempStr;
    //获取半径
    QString valueStr=lineEdit->text();
    int valueInt=valueStr.toInt(&ok);
    //计算面积
    double area=valueInt*valueInt*PI;
    //修改数据
    label2->setText(tempStr.setNum(area));
}

效果展示：

三、总结

        本文的示例比较简单、易懂，旨在介绍一下Qt GUI设计的方法和流程。各位不必使用单一的方法设计界面。纯代码和Designer相互配合才能高效的设计出优秀的界面。