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();
}