Qt5 学习之路及嵌入式开发教程9：Qt5布局管理及SIGNAL&SLOT传输

Qt5 学习之路及嵌入式开发教程9：Qt5布局管理及SIGNAL&SLOT传输

这次任务要完成的界面布局如下：

 

第一部分：Qt5布局管理

一、任务一：单击一控件，弹出新对话框

1、建立第一个对话框

（1）、建立应用程序

​

选择后，命名、两个下一步后进入设置界面

下一步后点击完成。

⑵、进入设置界面，进行界面布局设计（按本文开头的布局方式）

①、拖曳Grid Layout到右侧对话框，并调整大小，使之适合界面。

设置其属性：

②、设置右部布局，并设置对应属性

其属性：

③、设置底部布局，并添加两个按钮：确定，取消

布局属性为：

“确定”，“取消”按钮属性：

， 

整体布局设计完成。

2、完成两按钮功能：单击“取消”，关闭窗口；单击“确定”，弹出新窗口。

（1）、先简单的：单击“取消”，关闭窗口

右击“取消”按钮，找到菜单中的“转到槽”

然后，添加代码：

运行程序，查看结果。

（2）、单击“确定”，弹出新窗口。（这个知识点，值得反复理解和熟练操作）

①、新建另一个新窗口：NewDialog

右击项目文件：

在菜单项中找到“添加新文件”，在“新建文件”对话框设置

 

选择后：

下一步：

下一步后点击“完成”

项目中出现NewDialog窗体

②、添加代码、完成：单击Dialog中的“确定”按钮，转到新窗口：NewDialog

单击“dialog.h”,然后在文件头先添加头文件：#include "newdialog.h"

接着，在类定义中新增“新窗体”私有变量：NewDialog   newdialog;

最后，双击“dialog.ui”,右击“确定”按钮，找到菜单中“转到槽”：

然后添加代码：

③、运行，查看结果

④、双击newdialog.ui,进行简单设计，添加一个文本框（第二个任务有用，用来接受第一个界面的信息）

其属性为：

⑤、再次运行程序，查看结果：

3、双击中dialog.ui，进行布局添加控件

（1），左边布局：添加四个Label控件，两个LineEdit控件，一个Combo Box控件（用来显示性别），一个Text Edit控件。

整体效果为：

属性：所有字体属性为：宋体、字号14

①：

 

②：

 

③：，“男”，“女”的添加：双击控件，然后找到“+”后就可以添加了。

 

④：

 

（2）、右边布局：添加三个Label控件，一个按钮控件，一个Text Edit控件（右侧上部要再加一个Vertical Layout布局）

整体设计图如下：

属性为：

①、

 

②、，

 

③、

为了设置①控件中的图像自适应标签的大小，在dialog.cpp中设置其属性

其运行结果为：

（3）、实现“更新”功能：单击“更新”，选择自已的图像进行更新。

右击“更新”按钮，在菜单上找到“转到槽”

然后添加代码：

先添加头文件：

 

再在槽函数添加代码：

查看运行效果：

 

第二部分：SIGNAL&SLOT传输---不同Dialog之间的信号槽

1、先在dialog.h中添加信号发出函数：用来发出Dialog界面控件发出的消息

2、接着在newdialog.h中添加槽函数：用来接收Dialog界面发来的消息

3、然后在dialog.cpp中的“确定”按钮单击函数中，建立连接，并发出信号

①②为添加的代码：PersonEdit为“个人说明”下的控件属性名

 

4、然后在newdialog.cpp中添加接收函数

5、运行结果图：

 

做完这个项目后，感觉生活有了乐趣

第三部分：代码编写及设计思路

设计思路：先整体设计，设计图（如下图）；然后，在左、右、底布局中添加控件（控件见效果图）；最后，实现控件的功能。

编写代码步骤：

1、建立工程文件：把创建界面的“勾”去掉，下一步点击“完成”。

2、先完成整体布局设计

（1）、打开dialog.h文件

先加入头文件：#include <QGridLayout>

 

然后在类体定义内声明左、右，底布局变量

（2）、在dialog.cpp中对整体布局进行变量初始化及大小位置的设计

运行效果：

（3）、先设计左布局控件

先在dialog.h先声明相关控件变量

先导入头文件

接着，声明控件变量

（4）、在dialog.cpp中对左侧布局控件初始化并加入左侧布局

初始化：

 

向布局中加入控件：

运行结果：

 

（5）、在dialog.h中声明右侧控件变量

 

（6）、在dialog.cpp中对右侧控件初始化并添加控件到右侧布局中

控件初始化：

 

添加控件到右侧布局中

运行结果：

（7）、在dialog.h中声明底部控件变量

 

（8）、在dialog.cpp中对底部控件初始化并添加控件到底部布局中

底部控件初始化：

添加控件到底部布局：

 

运行结果：

整体布局完成。

（9）、完成“更新”功能

先在dialog.h中定义槽函数

然后，在dialog.cpp中先添加头文件

接着建立信号槽：

 

最后完成槽函数功能：

源代码：

//dailog.h
#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>

#include <QGridLayout>

#include <QLabel>
#include <QLineEdit>
#include <QComboBox>
#include <QTextEdit>
#include <QPushButton>


class Dialog : public QDialog
{
    Q_OBJECT

public:
    Dialog(QWidget *parent = 0);
    ~Dialog();

private:
    QGridLayout     *mainLayout;        //主布局
    QGridLayout     *LeftLayout;        //左布局
    QVBoxLayout     *RigthLayout;       //右布局
    QHBoxLayout     *BottomLayout;      //底布局

    //左侧变量
    QLabel          *StuNumLabel;
    QLabel          *NameLabel;
    QLabel          *SexLabel;
    QLabel          *InfoLabel;

    QLineEdit       *StuNumLineEdit;
    QLineEdit       *NameLineEdit;
    QComboBox       *SexComBox;
    QTextEdit       *InfoTextEdit;


    //右侧变量
    QLabel          *HeadLabel;
    QLabel          *HeadIconLabel;
    QPushButton     *UpdateBtn;
    QLabel          *IntroductionLabel;
    QTextEdit       *IntroductionTextEdit;

    QHBoxLayout     *TopRigthLayout;


    //底部变量
    QPushButton     *OkBtn;
    QPushButton     *CancelBtn;

private slots:
    void    UpdateBtnClick();

};

#endif // DIALOG_H


//dialog.cpp
#include "dialog.h"

#include <QFileDialog>
#include <QPainter>

Dialog::Dialog(QWidget *parent)
    : QDialog(parent)
{
    //设计窗体大小
    setMinimumSize(500,400);
    setMaximumSize(500,400);

    //布局变量初始化
    mainLayout      = new QGridLayout(this);
    LeftLayout      = new QGridLayout();
    RigthLayout     = new QVBoxLayout();
    BottomLayout    = new QHBoxLayout();

    //整体布局位置大小设计
    mainLayout->setMargin(15);
    mainLayout->setSpacing(10);


    mainLayout->addLayout(LeftLayout,0,0);
    mainLayout->addLayout(RigthLayout,0,1);
    mainLayout->addLayout(BottomLayout,1,0,1,2);



    //左侧控件变量初始化
    StuNumLabel     = new QLabel(tr("学号："));
    StuNumLineEdit  = new QLineEdit;
    NameLabel       = new QLabel(tr("姓名："));
    NameLineEdit    = new QLineEdit;
    SexLabel        = new QLabel(tr("性别："));

    SexComBox       = new QComboBox;
    SexComBox->addItem(tr("男"));
    SexComBox->addItem(tr("女"));

    InfoLabel       = new QLabel(tr("简述:"));
    InfoTextEdit    = new QTextEdit;

    //向左布局中加入控件
    LeftLayout->addWidget(StuNumLabel,0,0);
    LeftLayout->addWidget(StuNumLineEdit,0,1);
    LeftLayout->addWidget(NameLabel,1,0);
    LeftLayout->addWidget(NameLineEdit,1,1);
    LeftLayout->addWidget(SexLabel,2,0);
    LeftLayout->addWidget(SexComBox,2,1);
    LeftLayout->addWidget(InfoLabel,3,0);
    LeftLayout->addWidget(InfoTextEdit,3,1);




    //右侧控件变量初始化
    HeadLabel       = new QLabel(tr("头像："));
    HeadIconLabel   = new QLabel;
    //QPixmap icon("D:/image/head.jpg");

    QPixmap icon;
    HeadIconLabel->setPixmap(icon);
    //HeadIconLabel->resize(icon.width(),icon.height());
    HeadIconLabel->setScaledContents(true);

    UpdateBtn               = new QPushButton(tr("更新"));
    IntroductionLabel       = new QLabel(tr("个人说明："));
    IntroductionTextEdit    = new QTextEdit;


    //添加控件到右侧布局
    TopRigthLayout  = new QHBoxLayout();
    TopRigthLayout->setSpacing(10);



    TopRigthLayout->addWidget(HeadLabel);
    TopRigthLayout->addWidget(HeadIconLabel);
    TopRigthLayout->addWidget(UpdateBtn);

    RigthLayout->setMargin(15);
    RigthLayout->addLayout(TopRigthLayout);
    RigthLayout->addWidget(IntroductionLabel);
    RigthLayout->addWidget(IntroductionTextEdit);

    //底部控件变量初始化
    OkBtn       = new QPushButton(tr("确定"));
    CancelBtn   = new QPushButton(tr("取消"));

    BottomLayout->addStretch();
    BottomLayout->addWidget(OkBtn);
    BottomLayout->addWidget(CancelBtn);

    connect(UpdateBtn,SIGNAL(clicked()),this,SLOT(UpdateBtnClick()));



}

Dialog::~Dialog()
{

}

void Dialog::UpdateBtnClick()
{
    QString filename=QFileDialog::getOpenFileName(this,tr("打开图像"),QDir::currentPath());

    if(!filename.isEmpty())
    {
        QImage image(filename);
        HeadIconLabel->setPixmap(QPixmap::fromImage(image));
    }
}


//main.cpp
#include "dialog.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Dialog w;
    w.show();

    return a.exec();
}