电子工程师技术服务社区
公告
登录
|
注册
首页
技术问答
厂商活动
正点原子
板卡试用
资源库
下载
文章
社区首页
文章
一起学Qt之基础篇--------入门(下)
分 享
扫描二维码分享
一起学Qt之基础篇--------入门(下)
Qt
linux
交叉编译
大斯
关注
发布时间: 2020-03-31
丨
阅读: 916
# 前言 最近因为新的项目要做界面,所以开始接触Qt界面编程,发现Qt真真是太太太。。。好用了,我尤其是喜欢它的可视化开发工具qtcreate,非常直观的就能看到当前的界面是什么样子。而不用先下载到开发板上,麻烦!嘻嘻,我也是刚开始学习的,可能这篇文章不是很全面,有一起学习的小伙伴可以一起交流哦! ## 代码实现 前一节我们建立了新的工程,接下里我们开始编程,首先,看一下main.cpp内容,这是我们的主函数。 ```cpp #include "mainwidget.h" #include
#include
int main(int argc, char *argv[]) { QTextCodec::setCodecForCStrings(QTextCodec::codecForName("utf-8")); QApplication a(argc, argv); QSplitter *splitterMain = new QSplitter(Qt::Horizontal,0); splitterMain->setOpaqueResize(true); QLabel *labelIcon = new QLabel(); QPixmap icon(":/image/pigg.png"); labelIcon->resize(icon.width(),icon.height()); labelIcon->setPixmap(icon); labelIcon->setAlignment(Qt::AlignCenter); QPushButton *pushButtonIcon = new QPushButton("更改头像"); QListWidget *list = new QListWidget(); list->insertItem(0,"基本信息"); list->insertItem(1,"更多信息"); QVBoxLayout *layoutLeft = new QVBoxLayout(); layoutLeft->addWidget(labelIcon); layoutLeft->addWidget(pushButtonIcon); layoutLeft->addWidget(list); QWidget *leftWidget = new QWidget(); leftWidget->setLayout(layoutLeft); MainWidget *mainwidget = new MainWidget(); QObject::connect(list,SIGNAL(currentRowChanged(int)),mainwidget->stack,SLOT(setCurrentIndex(int))); splitterMain->addWidget(leftWidget); splitterMain->addWidget(mainwidget); splitterMain->setStretchFactor(0,1); splitterMain->setStretchFactor(1,5); splitterMain->setWindowTitle("布局管理"); splitterMain->setMinimumSize(splitterMain->minimumSize()); splitterMain->show(); return a.ex
ec(); } ``` 第8行主要是为了解决Qt中文乱码的问题 第10行QSplitter类就是我们前面说过的分裂器,将主窗口分裂成左右两个子窗口 第14-22行创建了左边窗口的存放图片的标签和按钮、创建出QListWidget类的对象并插入的条目信息 第24-29行创建QWidget,并将创建出的图片的标签、按钮等对象已垂直布局的方式添加到29行创建QWidget的对象中 第30行也是自定义的类MainWidget,主要是右界面 第32行用到了信号和槽,将QListWidget类和MainWidget类的栈部件进行连接,实现点击左侧的条目信息时右边出现相应的界面 再看一下mainWidget.h的内容: ```cpp #ifndef MAINWIDGET_H #define MAINWIDGET_H #include
#include "moreinfo.h" #include "baseinfo.h" class MainWidget : public QDialog { Q_OBJECT public: MainWidget(QWidget *parent = 0); ~MainWidget(); QStackedWidget *stack; private: QPushButton *pushButtonOk; QPushButton *pushButtonCancel; QPushButton *pushButtonApply; BaseInfo *baseinfo; MoreInfo *moreinfo; }; #endif // MAINWIDGET_H ``` 主要就是定义了栈部件类的对象,右边界面下方的3个按钮。注意一下自定义的两个类**BaseInfo**和**MoreInfo** 再看一下mainWidget.cpp: ```cpp #include "mainwidget.h" MainWidget::MainWidget(QWidget *parent) : QDialog(parent) { stack = new QStackedWidget(); stack->setFrameStyle(QFrame::Panel|QFrame::Raised); baseinfo = new BaseInfo(); moreinfo = new MoreInfo(); stack->addWidget(baseinfo); stack->addWidget(moreinfo); pushButtonOk = new QPushButton("确定"); pushButtonCancel = new QPushButton("取消"); pushButtonApply = new QPushButton("应用"); QHBoxLayout *layoutBtn = new QHBoxLayout(); layoutBtn->addStretch(); //在左边添加可拉伸区域 layoutBtn->addWidget(pushButtonOk); layoutBtn->addWidget(pushButtonCancel); layoutBtn->addWidget(pushButtonApply); QVBoxLayout *mainLayout = new QVBoxLayout(this); mainLayout->addWidget(stack); mainLayout->addLayout(layoutBtn); connect(pushButtonCancel,SIGNAL(clicked()),qApp,SLOT(quit())); } MainWidget::~MainWidget() { } ``` 第7-12行创建出栈部件QStackedWidget类的对象,设置凸起效果,然后创建两个自定义的对象baseinfo和moreinfo 第14-22行是创建3个按钮,并且进行水平排布 最后是i定义垂直布局,用来排布栈和按钮 前面我们总定义了两个类,主要就是右边界面要显示的东西,首先看一下baseinfo.h文件: ```cpp #ifndef BASEINFO_H #define BASEINFO_H #include
class BaseInfo : public QDialog { Q_OBJECT public: BaseInfo(QWidget *parent = 0); ~BaseInfo(); private: QLabel *labelID; QLineEdit *lineEditID; QLabel *labelNickName; QLineEdit *lineEditNickName; QLabel *labelSignature; QTextEdit *textEditSignature; QLabel *labelSex; QComboBox *comboBoxSex; QLabel *labelBirthday; QComboBox *comboBoxYear; QComboBox *comboBoxMonth; QComboBox *comboBoxDay; QLabel *labelAge; QComboBox *comboBoxAge; QLabel *labelZodiac; QComboBox *comboBoxZodiac; QLabel *labelConstellation; QComboBox *comboBoxConstellation; QLabel *labelBlood; QComboBox *comboBoxBlood; QPushButton *pushButtonOk; QPushButton *pushButtonCancel; }; #endif // BASEINFO_H ``` 在private里面定义的都是在界面中要实现的窗口部件,大家不用非得按照这个来,可以自己定义想要的部件,只是后边在cpp文件中的排列大家也要相应的改一下,看看baseinfo.cpp中的内容,比较多 ```cpp #include "baseinfo.h" BaseInfo::BaseInfo(QWidget *parent): QDialog (parent) { labelID = new QLabel("账号:"); lineEditID = new QLineEdit("123456789"); QVBoxLayout *layoutv2 = new QVBoxLayout; layoutv2->addWidget(labelID); layoutv2->addWidget(lineEditID); labelNickName = new QLabel("昵称:"); lineEditNickName = new QLineEdit("蓝色天空"); QVBoxLayout *layoutv3 = new QVBoxLayout; layoutv3->addWidget(labelNickName); layoutv3->addWidget(lineEditNickName); labelSignature = new QLabel("个性签名:"); textEditSignature = new QTextEdit(); QVBoxLayout *layoutv4 = new QVBoxLayout; layoutv4->addWidget(labelSignature); layoutv4->addWidget(textEditSignature); labelSex = new QLabel("性别:"); comboBoxSex = new QComboBox(); comboBoxSex->insertItem(0,"男"); comboBoxSex->insertItem(1,"女"); QVBoxLayout *layoutv5 = new QVBoxLayout; layoutv5->addWidget(labelSex); layoutv5->addWidget(comboBoxSex); labelBirthday = new QLabel("生日"); comboBoxYear = new QComboBox(); comboBoxYear->insertItem(0,"2011年"); comboBoxYear->insertItem(1,"2010年"); comboBoxYear->insertItem(2,"2009年"); comboBoxYear->insertItem(3,"2008年"); comboBoxYear->insertItem(4,"2007年"); comboBoxYear->insertItem(5,"2006年"); comboBoxYear->insertItem(6,"2005年"); comboBoxYear->insertItem(7,"2004年"); comboBoxYear->insertItem(8,"2003年"); comboBoxYear->insertItem(9,"2002年"); comboBoxYear->insertItem(10,"2001年"); comboBoxMonth = new QComboBox(); comboBoxMonth->insertItem(0,"1月"); comboBoxMonth->insertItem(1,"2月"); comboBoxMonth->insertItem(2,"3月"); comboBoxMonth->insertItem(3,"4月"); comboBoxMonth->insertItem(4,"5月"); comboBoxMonth->insertItem(5,"6月"); comboBoxMonth->insertItem(6,"7月"); comboBoxMonth->insertItem(7,"8月"); comboBoxMonth->insertItem(8,"9月"); comboBoxMonth->insertItem(9,"10月"); comboBoxMonth->insertItem(10,"11月"); comboBoxMonth->insertItem(10,"12月"); comboBoxDay = new QComboBox(); comboBoxDay->insertItem(0,"1日"); comboBoxDay->insertItem(1,"2日"); comboBoxDay->insertItem(2,"3日"); comboBoxDay->insertItem(3,"4日"); comboBoxDay->insertItem(4,"5日"); comboBoxDay->insertItem(5,"6日"); comboBoxDay->insertItem(6,"7日"); comboBoxDay->insertItem(7,"8日"); comboBoxDay->insertItem(8,"9日"); comboBoxDay->insertItem(9,"10日"); comboBoxDay->insertItem(10,"11日"); comboBoxDay->insertItem(11,"12日"); comboBoxDay->insertItem(12,"13日"); comboBoxDay->insertItem(13,"14日"); comboBoxDay->insertItem(14,"15日"); comboBoxDay->insertItem(15,"16日"); comboBoxDay->insertItem(16,"17日"); comboBoxDay->insertItem(17,"18日"); comboBoxDay->insertItem(18,"19日"); comboBoxDay->insertItem(19,"20日"); comboBoxDay->insertItem(20,"21日"); comboBoxDay->insertItem(21,"22日"); comboBoxDay->insertItem(22,"23日"); comboBoxDay->insertItem(23,"24日"); comboBoxDay->insertItem(24,"25日"); comboBoxDay->insertItem(25,"26日"); comboBoxDay->insertItem(26,"27日"); comboBoxDay->insertItem(27,"28日"); comboBoxDay->insertItem(28,"29日"); comboBoxDay->insertItem(29,"30日"); QHBoxLayout *layoutH1 = new QHBoxLayout; layoutH1->addWidget(comboBoxYear); layoutH1->addWidget(comboBoxMonth); layoutH1->addWidget(comboBoxDay); QVBoxLayout *layoutv6 = new QVBoxLayout; layoutv6->addWidget(labelBirthday); layoutv6->addLayout(layoutH1); labelAge = new QLabel("年龄"); comboBoxAge = new QComboBox(); QStringList listAge; listAge <<"20"<<"21"<<"22"<<"23"<<"24"<<"25"<<"26"<<"27"<<"28"<<"29"<<"30"; comboBoxAge->addItems(listAge); QVBoxLayout *layoutv7 = new QVBoxLayout; layoutv7->addWidget(labelAge); layoutv7->addWidget(comboBoxAge); labelZodiac = new QLabel("生肖"); comboBoxZodiac = new QComboBox(); QStringList listZodiac; listZodiac<<"鼠"<<"牛"<<"虎"<<"兔"<<"龙"<<"蛇"<<"马"<<"羊"<<"猴"<<"鸡"<<"狗"<<"猪"; comboBoxZodiac->addItems(listZodiac); QVBoxLayout *layoutv8 = new QVBoxLayout; layoutv8->addWidget(labelZodiac); layoutv8->addWidget(comboBoxZodiac); labelConstellation = new QLabel("星座"); comboBoxConstellation = new QComboBox(); QStringList listConstellation; listConstellation<<"水瓶座"<<"双鱼座"<<"白羊座"<<"金牛座"<<"双子座"<<"巨蟹座"<<"狮子座"<<"处女座"<<"天秤座"<<"天蝎座"<<"射手座"<<"摩羯座"; comboBoxConstellation->addItems(listConstellation); QVBoxLayout *layoutv9 = new QVBoxLayout; layoutv9->addWidget(labelConstellation); layoutv9->addWidget(comboBoxConstellation); labelBlood = new QLabel("血型"); comboBoxBlood = new QComboBox(); QStringList listBlood; listBlood <<"A型"<<"B型"<<"ABx型"<<"O型"<<"其他"; comboBoxBlood->addItems(listBlood); QVBoxLayout *layoutv10 = new QVBoxLayout; layoutv10->addWidget(labelBlood); layoutv10->addWidget(comboBoxBlood); pushButtonOk = new QPushButton("确定"); pushButtonCancel = new QPushButton("取消"); QHBoxLayout *layoutH2 = new QHBoxLayout; layoutH2->addLayout(layoutv3); layoutH2->addLayout(layoutv2); QGridLayout *layoutG1 = new QGridLayout; layoutG1->addLayout(layoutv5,0,0); layoutG1->addLayout(layoutv6,0,1,1,3); layoutG1->addLayout(layoutv7,1,0); layoutG1->addLayout(layoutv8,1,1); layoutG1->addLayout(layoutv9,1,2); layoutG1->addLayout(layoutv10,1,3); QVBoxLayout *mainlayout = new QVBoxLayout; mainlayout->addLayout(layoutH2); mainlayout->addLayout(layoutv4); mainlayout->addLayout(layoutG1); setLayout(mainlayout); } BaseInfo::~BaseInfo() { } ``` 一直到35行,都是创建窗口部件,comboBoxSex = new QComboBox()是创建了组合框,然后insertItem()函数是加入了两个条目,有两个参数,第一个是条目的索引值,第二个参数是要在其中显示的信息 接下里的关于出生年月的这一大长串就不多说了,第97-103是一个水平布局管理器,再创建垂直布局管理,将标签和水平布局管理器加入其中 年龄、生肖、血型等信息大家自己看,注意一下152行,创建了一个网格布局管理器,通过addLayout()函数大家排排坐。其中有一行大家发现了没有。是5个参数,前三个一样,是要添加的布局类,放入位置的行列坐标,多出来的两个参数代表要跨越的行数和列数。 另外的MoreInfo类的文件和上述一样,也是添加部件,进行组合排列。给大家贴一下代码,moreinfo.h: ```cpp #ifndef MOREINFO_H #define MOREINFO_H #include
class MoreInfo : public QDialog { Q_OBJECT public: MoreInfo(QWidget *parent = 0); ~MoreInfo(); private: QLabel *labelLimits; QComboBox *comboBoxLimits; QLabel *labelCellphone; QLineEdit *lineEditCellphone; QLabel *labelTelephone; QLineEdit *lineEditTelephone; QLabel *labelPostbox; QLineEdit *lineEditPostbox; QLabel *labelLanguage; QComboBox *comboBoxLanguage1; QComboBox *comboBoxLanguage2; QComboBox *comboBoxLanguage3; QLabel *labelVocation; QComboBox *combiBoxVocation; QLabel *labelSchool; QLineEdit *lineEditSchool; QLabel *labelHomePage; QLineEdit *lineEditHomePage; QLabel *labelState; QTextEdit *textEditState; }; #endif // MOREINFO_H ``` moreinfo.cpp: ```cpp #include "moreinfo.h" MoreInfo::MoreInfo(QWidget *parent): QDialog(parent) { labelLimits = new QLabel("请选择一下联系资料显示范围:"); comboBoxLimits = new QComboBox(); comboBoxLimits->insertItem(0,"完全公开"); comboBoxLimits->insertItem(1,"仅好友可见"); comboBoxLimits->insertItem(2,"完全保密"); labelCellphone = new QLabel("手机:"); lineEditCellphone = new QLineEdit(); labelTelephone = new QLabel("电话:"); lineEditTelephone = new QLineEdit(); labelPostbox = new QLabel("邮箱"); lineEditPostbox = new QLineEdit(); QGridLayout *layoutG1 = new QGridLayout(); layoutG1->addWidget(labelLimits,0,0); layoutG1->addWidget(labelCellphone,0,1); layoutG1->addWidget(comboBoxLimits,1,0); layoutG1->addWidget(lineEditCellphone,1,1); layoutG1->addWidget(labelTelephone,2,0); layoutG1->addWidget(labelPostbox,2,1); layoutG1->addWidget(lineEditTelephone,3,0); layoutG1->addWidget(lineEditPostbox,3,1); labelLanguage = new QLabel("语言"); comboBoxLanguage1 = new QComboBox(); comboBoxLanguage1->insertItem(0,"中文简体"); comboBoxLanguage1->insertItem(1,"中文繁体"); comboBoxLanguage2 = new QComboBox(); comboBoxLanguage2->insertItem(0,"中文简体"); comboBoxLanguage2->insertItem(1,"中文繁体"); comboBoxLanguage3 = new QComboBox(); comboBoxLanguage3->insertItem(0,"中文简体"); comboBoxLanguage3->insertItem(1,"中文繁体"); QHBoxLayout *layoutH1 = new QHBoxLayout(); layoutH1->addWidget(comboBoxLanguage1); layoutH1->addWidget(comboBoxLanguage2); layoutH1->addWidget(comboBoxLanguage3); QVBoxLayout *layoutV1 = new QVBoxLayout(); layoutV1->addWidget(labelLanguage); layoutV1->addLayout(layoutH1); labelVocation = new QLabel("职业"); combiBoxVocation = new QComboBox(); combiBoxVocation->insertItem(0,"学生"); combiBoxVocation->insertItem(1,"计算机/互联网/IT"); combiBoxVocation->insertItem(2,"其他"); labelSchool = new QLabel("毕业院校:"); lineEditSchool = new QLineEdit(); QGridLayout *layoutG2 = new QGridLayout(); layoutG2->addWidget(labelVocation,0,0); layoutG2->addWidget(labelSchool,0,1); layoutG2->addWidget(combiBoxVocation,1,0); layoutG2->addWidget(lineEditSchool,1,1); labelHomePage = new QLabel("个人主页:"); lineEditHomePage = new QLineEdit(); QVBoxLayout *layoutv2 = new QVBoxLayout(); layoutv2->addWidget(labelHomePage); layoutv2->addWidget(lineEditHomePage); labelState = new QLabel("个人说明"); textEditState = new QTextEdit(); QVBoxLayout *layoutV3 = new QVBoxLayout(); layoutV3->addWidget(labelState); layoutV3->addWidget(textEditState); QVBoxLayout *mainlayout = new QVBoxLayout(this); mainlayout->addLayout(layoutG1); mainlayout->addLayout(layoutV1); mainlayout->addLayout(layoutG2); mainlayout->addLayout(layoutv2); mainlayout->addLayout(layoutV3); } MoreInfo::~MoreInfo() { } ``` 其实总结起来非常简单,就是在构造之前,大家先要对界面规划有个大概的想法,然后在.h文件中定义部件以及需要的函数。在.cpp文件中使用布局管理器按照之前的设计规划进行排布。 今天的学习计划就到这了,下期再见!!!
原创作品,未经权利人授权禁止转载。详情见
转载须知
。
举报文章
点赞
(
1
)
大斯
关注
评论
(1)
登录后可评论,请
登录
或
注册
wg3613
21
天前...
谢谢分享,,,,,,,,,
0
回复
发布
相关文章推荐
MK-米客方德推出工业级存储卡
Beetle ESP32 C3 蓝牙数据收发
Beetle ESP32 C3 wifi联网获取实时天气信息
开箱测评Beetle ESP32-C3 (RISC-V芯片)模块
正点原子数控电源DP100测评
DP100试用评测-----开箱+初体验
Beetle ESP32 C3环境搭建
【花雕体验】16 使用Beetle ESP32 C3控制8X32位WS2812硬屏之二
X
你的打赏是对原创作者最大的认可
请选择打赏IC币的数量,一经提交无法退回 !
100IC币
500IC币
1000IC币
自定义
IC币
确定
X
提交成功 ! 谢谢您的支持
返回
我要举报该内容理由
×
广告及垃圾信息
抄袭或未经授权
其它举报理由
请输入您举报的理由(50字以内)
取消
提交