时间戳

首页 > 技术文章 > 我的QT5学习之路（三）——模板库、工具类和控件(下)

我的QT5学习之路（三）——模板库、工具类和控件(下)

jingliming 2015-12-20 18:20 原文

一、前言

　　作为第三篇的最后一部分，我们来看一下Qt的控件，谈到控件，就会让人想到界面的美观性和易操作性，进而想到开发的便捷性。作为windows界面开发的MFC曾经是盛行了多少年，但是其弊端也随着其他界面库的面世而不断的被放大，对于一个刚学会C或者C++转而学习windows界面开发的新手来说，MFC的控件和界面设计抽象而且复杂，也许现在你还记得MFC控件重绘比其他界面库多花费的时间，走过的弯路，调过的bug。因此，我们现在来看看Qt会不会带给我们不一样的体验，Let‘s go。

二、控件介绍

2.1 按钮组(Buttons)

　　对于按钮的展示和操作，我们直接通过图片和代码的方式来展示。

Push Button：按钮

Tool Button：工具按钮

Radio Button：单选按钮

Check Box：复选框

Command Link Button：命令连接按钮

Dialog Button Box：窗口按钮盒

2.1.1 按钮实例

 1 #include "mywidegt.h"
 2 #include <QApplication>
 3 
 4 int main(int argc, char *argv[])
 5 {
 6     QApplication a(argc, argv);
 7     MyWidegt w;
 8     /*设置主窗体的位置和初始大小*/
 9     w.setGeometry(100,100,200,100);
10     w.show();
11     return a.exec();
12 }
main.cpp
 1 #ifndef MYWIDEGT_H
 2 #define MYWIDEGT_H
 3 
 4 #include <QWidget>
 5 
 6 class MyWidegt : public QWidget
 7 {
 8     Q_OBJECT
 9 
10 public:
11     MyWidegt(QWidget *parent = 0);
12     ~MyWidegt();
13 };
14 
15 #endif // MYWIDEGT_H
mywidegt.h
 1 #include "mywidegt.h"
 2 #include <qapplication.h>
 3 #include <qpushbutton.h>
 4 #include <qfont.h>
 5 
 6 MyWidegt::MyWidegt(QWidget *parent)
 7     : QWidget(parent)
 8 {
 9     /*设置对话框的最小显示尺寸*/
10     setMinimumSize(200,120);
11     /*设置对话框的最大显示尺寸*/
12     setMaximumSize(1366,768);
13     /*PushButton的构造函数
14     QPushButton::QPushButton(const QString & text, QWidget * parent = 0)
15     */
16     QPushButton *quit=new QPushButton("Quit",this);
17     /*setGeometry(int x, int y, int w, int h)从坐标(x,y)开始显示一个w*h大小的界面，范围不能超过上面设置的尺寸*/
18     quit->setGeometry(62,40,75,30);
19     /*设置字体    void    setFont(const QFont &)*/
20     quit->setFont(QFont("Times",18,QFont::Bold));
21 
22     connect(quit,SIGNAL(clicked()),qApp,SLOT(quit()));
23 
24 }
25 
26 MyWidegt::~MyWidegt()
27 {
28 
29 }
mywidegt.cpp

2.2 输入控件组(Input Widegets)

输入控件组(Input Widegets)包含的各个控件的名称依次如图所示

              Combo Box： 组合框

　　　　　Font Combo Box： 字体组合框

　　　　　Line Edit： 行编辑

　　　　　Text Edit： 文本编辑

　　　　　Plain Text Edit：文本编辑

　　　　　Spin Box： 数字显示框（自旋盒）

　　　　　Double Spin Box： 双自旋盒

　　　　　Time  Edit： 时间编辑

　　　　　Date Edit： 日期编辑

　　　　　Date/Time Edit： 日期/时间编辑

　　　　　Dial：拨号

　　　　　Horizontal Scroll Bar： 横向滚动条

　　　　　Vertical Scroll Bar：垂直滚动条

　　　　　　　　　　　　　　　　　　Horizontal Slider： 横向滑块

　　　　　　　　　　　　　　　　　　Vertical Slider：垂直滑块

　　　　　　　　　　　　　　　　　　Key Sequence Edit：快捷键编辑 

2.2.1 控件类介绍

1、QDateTime类

　　在Qt5中，可以使用QDateTime类类获取系统的时间。通过QdateTime::currentDateTime()来获取本地系统的时间和日期吸纳好。可以通过date()和time()来返回datetime中的日期和时间部分，代码如下。

1 Qlabel *datalabel = new Qlabel();
2 QdateTime *datatime=new QdateTime(QdateTime::currentDateTime());
3 datalabel->setText(datatime->date().toString());
4 datalabel->show();

2、Qtimer类

　　定时器（Qtimer）的使用很简单，只需要以下几个步骤就可以完成定时器的应用。

　　（1）新建一个定时器

QTimer *time_clock=new Qtimer(parent);

　　（2）连接这个定时器的信号和槽，利用定时器的timeout()。

connect(time_clock,SIGNAL(timeout()),this,SLOT(slottimedone()));

　　定时时间一到就会发送timeout()信号，从而出发slottimedone()槽去完成某件事情。

　　（3）开启定时器，并设定定时周期

　　开启定时器有两种方式，start(int time)和setSingelShot(true)。其中，第一种表示每隔“time”秒就会重启定时器，可以重复出发定时，利用stop()将定时器关闭；而setSingleShot(true)则是仅启动定时器一次。工程中常用的是前者，比如 time_clock->start(2000);

2.3 显示控件组(Display Widegts)

　　　　　　　 Lbael：标签

　　　　　　　 Text Browser：文本浏览器

　　　　　　　 Graphics View：图形视图

　　　　　　　 Calendar： 日历

　　　　　　　 LCD Number：液晶数字

                     Progress Bar：进度条

                     Horizontal Line：水平线

                     Vertical Line：垂直线

                     QDeclarativeView：向QML暴露数据视图

　　　　　　　 QQuickWidegt：快速布局

                     QWebView：web视图

 

2.3.1 控件类介绍

（1）Graphics View对应于QGraphicsView类

（2）Text Browser对应于QTextBrowser类。QTextBrowser类继承自QTextEdit，而且近视只读的，对立面的内容并不能进行更改，但是相对于QTextEdit来讲，它还具有链接文本的作用。

2.4 空间间隔组（Spacers）

    Horizontal Spacer：水平间隔

    Vertical Spacer：垂直间隔

 

2.5  布局管理组(Layouts)

    Vertical Layout： 垂直布局

    Horizontal Layout：横向(水平)布局

    Grid Layout：网格布局

    Form Layout： 表格布局

2.6 容器组(Containers)

    　　　　Group Box：组框

   　　 　　Scroll Area：滚动区域

   　　 　　Tool   Box：工具箱

   　　 　　Tab Widget：标签小部件

    　　　　Stacked Widegt：堆叠部件

    　　　　Frame ：帧

    　　　　Widget：小部件

    　　　　MdiArea：MDI区域

　　　　　 Dock Widget：停靠窗口部件

　　　　　 QAxWidget：封装Flash的ActiveX控件

2.7 项目视图组（Item Views）

   List View：清单视图

   Tree View：树视图

   Tabel View：表视图

   Column View：列视图

2.8项目控件组(Item Widgets)

    List Widegt：清单控件

    Tree Widegt：树形控件

    Tabel Widegt：表控件

 

三、 综合样例

 1 #ifndef DIALOG_H
 2 #define DIALOG_H
 3 
 4 #include <QDialog>
 5 
 6 namespace Ui {
 7 class Dialog;
 8 }
 9 
10 class Dialog : public QDialog
11 {
12     Q_OBJECT
13 
14 public:
15     explicit Dialog(QWidget *parent = 0);
16     ~Dialog();
17 
18 private:
19     Ui::Dialog *ui;
20 private slots:
21     void on_lineEdit_textChanged();
22 };
23 
24 #endif // DIALOG_H
 1 #include "dialog.h"
 2 #include "ui_dialog.h"
 3 
 4 Dialog::Dialog(QWidget *parent) :
 5     QDialog(parent),
 6     ui(new Ui::Dialog)
 7 {
 8     ui->setupUi(this);
 9     /*只允许第一个字元输入大小写英文字母，后面接一位非0的数字，再接0~2位可为0的数字*/
10     QRegExp regExp("[A-Za-z][1-9][0-9]{0,2}");
11     //设置验证器，即只能输入正则要求的类型的输入
12     ui->lineEdit->setValidator(new QRegExpValidator(regExp,this));
13     connect(ui->okButton,SIGNAL(clicked()),this,SLOT(accept()));
14     connect(ui->cancelButton,SIGNAL(clicked()),this,SLOT(reject()));
15    
16 }
17 
18 Dialog::~Dialog()
19 {
20     delete ui;
21 }
22 
23 void Dialog::on_lineEdit_textChanged()
24 {
25     //当编辑框检测到有输入时，将ok按钮设置为可用
26     ui->okButton->setEnabled(ui->lineEdit->hasAcceptableInput());
27 }

 四、 小结

　　好了，到了这里关于模板库、工具类和控件的内容就基本说完了，详细的内容和重点会在以后的学习中相应的有所提及，最后希望自己能够学得深入，也希望读者能够读完有所收获。

推荐阅读