第九天：QT入门保姆教程（常用的控件，信号与槽，定时器 QTimer，样式表 Qt Style Sheets，sqlite3数据库，开发板串口）

QT的简介

我另外分享了一个qt案例源码包，里面包括文章中的任务源码和一系列常用案例需要的点击此处下载

官网 www.qt.io 

QT 是一个基于C++的 跨平台的 应用程序开发框架 

    跨平台：
        一次编写，到处编译 
        主流的平台都支持，如：Windows，Linux，Android，MacOS ... 

    应用程序：
        主要用于GUI程序开发，也可以用于后台或者底层程序开发 

    开发框架：
        有现成的库可供使用，提高开发效率 
1
2
3
4
5
6
7
8
9
10
11
12
13

1.第一个QT程序

1）用 QtCreator 创建一个工程 
    欢迎  -->  New Project  --> 其他项目 --> empty qmake project 

2）在空的pro项目中 
    添加文件：  右键点击项目 --》 添加新文件 --》C++  --》 C++ source file --》命名

    添加模块： 
        QT += widgets

3)第一个应用程序 
1
2
3
4
5
6
7
8
9
10

   #include      //所有的QT程序都必须加载此头文件，用于管理这个应用程序
        #include          //空白的界面

        int main(int argc, char* argv[])
        {
            //实例化一个QApplication类型的对象，用于管理整个应用程序，如接收命令行参数
            QApplication a( argc, argv );

            //实例化一个QWidget空白界面对象w，默认隐藏
            QWidget w;

            //显示界面
            w.show();

            //让应用程序进入事件循环，让界面不退出，并能够接收用户的事件，如：鼠标点击、键盘输入等... 
            a.exec();

            return 0;
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

点击“运行”  Ctrl + r 
1

2.QT程序的补充

QT中所有的头文件都是以大写字母Q开头，Q后面的单词首字母也是大写 
    头文件没有后缀名，头文件的名称也是类名称 

所有的QT界面应用程序 都必须包含 QApplication类，用这个类来实例化一个对象，用于管理整个QT项目

QT中的类型 是按功能 划分 模块
    模块很多，但是和界面相关的模块主要用到如下模块：
        core    核心模块，其他的所有模块都依赖于此模块，默认加载 
        gui     界面相关的功能模块，如字体、颜色、风格等，默认加载
        widgets  界面元素(所有能够在界面上看到的控件)都放在此模块中，需要用户自己添加到pro文件中 
                添加方式：
                        QT += widgets
                        QT += core 
                        QT += gui

    每个模块中都包含很多类，widgets模块中最核心的类型就是 QWidget 
        
        QWidget类 有两个基类 和 许多派生类 

            两个基类： 
                QObject  这个是QT层次中 最顶层的基类，它提供了QT最核心的功能：信号与槽 
                QPaintDervice 这也是一个顶层基类，该类以及它的派生类 能够作为绘制设备使用

            它的派生类可以分为两类：
                界面类 
                    QMainWindow 就是包含菜单、工具栏、状态栏的界面 
                    QDialog     对话框 

                控件类
                    菜单、工具栏、状态栏、按钮、文本框、标签、组合框架 ...
                    所有的控件都应该出现在某个界面上
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

3.pro文件

    所有的QT项目中 都必须包含一个pro文件（工程管理文件）
    描述了这个项目中所有的东西(头文件/源文件/界面文件/模块/第三方库/...)
1
2

4.影子构建（如果出现在设计里面改ui但是运行不生效的情况，点击 项目-构建 取消影子构建即：shadowbuild）

    QtCreator在默认情况下 把项目的源码(.h/.cpp/.ui/...) 与 
        中间以及结果(.o/Makefile/xxx ...)文件 分开存放，源码在项目的文件夹下，
        而中间以及结果文件 跟随项目的文件夹， 与项目文件夹在同一个目录中 

            存放中间以及结果文件的文件夹 称为构建目录 ，名称： 
                build-项目名称-编译套件名-模式
                    例如： 
                        build-test2-Arm_Qt_5_9_1-Release
                        build-test2-Desktop_Qt_5_9_1_GCC_64bit-Debug

               build构建目录 可以删除，只需要重新构建即可 都会自动生成
               如果是从其他地方拷贝过来的项目，建议删除build构建目录，再重新编译
1
2
3
4
5
6
7
8
9
10
11
12

QT常用操作教程

1、常用的控件

label  标签
lineEdit 文本框（单行）
pushButton  按钮 
... 

修改控件的属性：
    font 字体 
    alignment  对齐
    geometry    宽高
        固定界面的尺寸 把 minimumsize 和 maximumsize 两个值设置成一样 
    echomode  显示模式（如：设置密码不可见）
    ....

    练习：
        设计一个简易的登陆界面 

            预览 快捷键： Alt Shift r 

            选中控件，右键 --》 转到槽 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2、信号与槽

信号和槽 是一种通信机制，用于Qt对象之间的通信  

    Qt对象：
        QObject类以及其派生类的对象 称为Qt对象 

    信号和槽的本质 就是函数 
        当一个Qt对象的内部状态发生了改变，就可以发送一个信号 
        当一个Qt对象收到这个信号之后，就可以执行指定的功能 

信号与槽的连接

    QObject类提供了一个函数 connect() ，用于连接两个Qt对象的信号和槽 
    对于Qt对象的通信，Qt系统 需要了解如下的信息：
        哪个对象发出了信号 
        发出了什么信号 
        哪个对象接收信号
        收到信号后做什么

    所以 connect() 函数的常规的参数如下： 
        connect( sender, SIGNAL( 信号函数名(参数类型) ), receiver, SLOT(槽函数(参数类型)) );

                sender, receiver 都是Qt对象的地址

            connect()函数需要执行一次，且只需要执行一次，
            一般情况下，把connect()函数 通常出现在 构造函数中 


所有的界面元素对象，都可以进行通信，而且还预定义了一些信号和槽，可以直接使用的 
如果预定义的信号和槽不能满足项目需求，还可以 自定义信号与槽  

    （1）自定义信号：
        (a)在头文件中声明信号 
            signals: 
                返回值类型 信号函数名(参数列表);
        (b)使用信号 
            发送信号:  emit 信号函数名(参数列表); 

    （2）自定义槽
        (a)在头文件中声明槽函数 
            public/private/protected slots: 
                返回值类型 槽函数名(参数列表);
        (b)在源文件中添加定义
                返回值类型 槽函数名(参数列表)
                {
                    //槽函数体 
                }
        (c)使用 
            可以使用普通函数一样的调用方法 直接 调用槽函数 
            可以用connect与某个信号相关联，当连接的信号发出时，立即自动调用该槽函数 


信号与槽的连接 可以有两种形式： 
    手动连接：自己调用connect函数，连接两个对象的信号与槽
    自动连接：从界面设计器中 右键选中控件--》转到槽，自动生成槽函数，
            根据对象名和信号函数名，自动连接 

例子： 
    按钮 最常用的信号 叫 clicked() ..
    按钮 也有自带的槽函数， 如： show() / hide() / setText() ... 

    界面 常用的槽函数 有 show() / close() / hide() ... 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

3、定时器 QTimer

用于重复(循环)的执行某个动作，设置一个时间间隔，时间到就会超时 发出信号timeout()，
一直重复此过程，直到定时器停止

加载头文件 
    #include 

实例化定时器对象 
    QTimer *timer = new QTimer(this);

设置间隔时间 
    timer->setInterval( int msecs );    //单位：ms 

连接信号与槽 
    当定时器超时，发出信号timeout() 
    connect( timer, SIGNAL(timeout()), this, SLOT(槽函数) );

启动定时器 
    timer->start() 

停止定时器 
    timer->stop() 

典型的应用的应用：
    获取并显示当前的系统时间
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

4、样式表 Qt Style Sheets

样式表 借鉴了HTML中的CSS(层叠样式表)， 应用到QT的控件中 
        用于自定义 界面外观，如界面背景颜色、背景图片、字体、颜色、形状、 ... 
    
样式表有自己专门的语法规则：
    我们把设置界面外观的样式表代码，称为样式规则 
    一条样式规则，由两部分组成：

    (1)样式选择器 ：指定 受样式规则 影响的控件 
        样式选择器有7中，其中最常用的是以下2种：
            类型选择器：所有属于该类型的控件 都会受到样式规则的影响 
            ID选择器：ID指的是 对象名，也就是说 特定对象名的控件 才会受到样式规则的影响

        例子： 
            选择器设置为 QPushButton,那么所有的QPushButton类型的对象都会受影响 

            选择器设置为 QPushButton#btn_login，
                那么只有 控件名为btn_login的按钮 才会受到样式规则的影响 


    (2)样式声明 ：控件的具体的外观设置，如颜色、大小、字体等 
                由两部分组成：
                    属性 ： 指定要设置的具体的属性名 
                    值 ：   指定要设置的具体的属性的值
                属性与值 用冒号隔开

            例子： 
                需要设置某个控件的字体颜色为红色 
                    {color: #FF0000}

因此 一条完整的样式规则如下：
    选择器1, ...{属性1:值1; ... }

    例子： 
        要设置所有的按钮的字体颜色都为红色，样式规则 如下：
            QPushButton
            {
                //color: #FF0000
                color: rgb(255,0,0)
            }


样式规则有两种设置方式 
    UI设计器
        双击xxx.ui文件，进入UI设计器，右键选择要设置的控件，在弹出的菜单栏中，选择“改变样式表” 

    代码 (最终运行会以代码的样式设计为主，会覆盖UI的设计)
        setStyleSheet("样式规则")


常用的样式规则的示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

       QPushButton             /*所有的按钮的正常属性的设置*/
        {
            color:#FFFF00;                          //字体的颜色
            background-color: rgb(114, 159, 207);   //背景颜色
            font: 57 italic 11pt "Ubuntu";          //字体：权重、斜体、点大小(粗细)、字体名称
        }

        QPushButton#btn_circle             /*对象名为btn_circle的按钮的正常属性的设置*/
        {
            color: #FF000;              //字体颜色 
            border-radius: 50px;        //边框半径：如果按钮的宽和高相同，边框的半径为宽高的一般，则为圆形按钮
            border-width: 2px;           //边框大小(粗细)
            border-style: solid;        //边框的风格： solid表示实线，更多的风格 参考帮助文档
            border-color: green;        //边框颜色 
        }

        QPushButton#btn_circle:pressed       /*对象名为btn_circle的按钮的伪状态的设置：pressed按下状态 */
        {
            background-color: #FFFF00 ;     //背景颜色,鼠标左键点击，改变背景颜色 
            // background-color: transparent;       //透明
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

5、样式表中添加资源文件

1）准备资源 
    
    把各种资料（图片、图标等）， 放入源码目录 
        建议创建一个图片文件夹，专门用来存放各种图片

2）添加资源 
    右键工程名--》添加新文件--》QT--》QT Resource File --》起名（如Res）--》下一步 到 完成 
    在新出现的界面中，点击添加 
        添加前缀(路径)，一般设置为 / 就可以了 
        添加文件 默认打开的就是源码目录，选择要添加的各种资源即可 
    
        最后 保存 Ctrl s 

3）使用资源 
    右键ui界面 --》 改变样式表 --》 添加资源 ，有三种效果 
        background-image        平铺 
        border-image            拉伸 
        image                   居中
        根据需要 选择其中之一 即可 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

6、数据库

帮助文档 SQL Programming 

大多数关系型数的操作步骤：
    1）连接数据库 
        多数关系型数据库都是C/S模型 (Client/Server)
        sqlite3是一个本地的单文件关系型数据库，同样也有“连接”的过程 

    2）操作数据库 
        作为程序员，对数据库最常见的操作 就是 增删改查

    3）关闭数据库 
        连接也是一种资源，用完记得释放 


Qt中 的数据库功能是放在一个单独的模块中，模块名为 sql  
    所以 如果需要使用Qt的数据库功能，需要在pro文件中 添加如下的指令： 
        QT  +=  sql  

Qt的sql模块中包含了大约10几个类型，常用的以下的三个：
    (1) QSqlDatabase 
        用于处理数据库的连接，包括 创建连接对象、设置连接属性、关闭连接

    (2) QSqlQuery
        用于执行SQL语句

    (3) QSqlError
        用于处理数据库错误，提供可读的错误信息 


连接数据库的典型代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

       //初始化连接对象，使用静态函数addDatabase,参数是数据库类型 QSQLITE -- sqlite3
        db = QSqlDatabase::addDatabase("QSQLITE");

        //设置数据库名，建议带路径，如果存在，直接打开，如果不存在，则自带创建
        db.setDatabaseName("../test.db");

        //打开连接, 成功或者失败，给出相应的提示对话框
        bool ok = db.open();
        if( !ok )
        {
            QMessageBox::information( this, "tip", db.lastError().text() );
            return ;
        }
        QMessageBox::information(this, "tip", "connect db success! ");



    执行SQL语句的典型代码：
        //创建用来执行SQL语句的对象
        QSqlQuery query( db );

        //准备SQL语句
        QString createsql = QString( "select username, passwd from t_user where username='%1';").arg(ui->lineEdit->text());
        qDebug() << createsql;

        //执行SQL语句
        if( !query.exec( createsql ) )
        {
            qDebug() << "select error : " << query.lastError().text();
            return ;
        }

        //QMessageBox::information( this, "提示", "select success! ");

        //遍历结果集
        while( query.next() )
        {
            //value用来获取一条记录(行)的列的值，可以使用索引(下标)，也可以使用列名
            //value返回的是一个共用体，必须转换成该列的值真正的类型才来使用
            QString username = query.value(0).toString();
            QString passwd = query.value("passwd").toString();
            qDebug() << username << " -- " << passwd;
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

任务： 
    实现用户的登录注册功能 

        登录功能：
            获取用户输入的信息 
            查询数据库（获取用户名和密码）
            进行验证，并提示相应信息

        注册功能：
            获取用户输入的信息 
            往数据库插入数据  
             
            
    stackedWidget 控件
        用于实现多页面的切换 

            //确保一开始显示的是登陆界面
            ui->stackedWidget->setCurrentWidget(ui->page_login);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

7、串口

帮助文档 Qt Serial Port 

需要使用串口模块，在pro文件中添加模块：
    QT  += serialport 

该模块中包含两个类，一般只需要用其中一个 QSerialPort 

使用步骤： 
    1)加载头文件 
        #include 

    2)实例化对象 
        QSerialPort *serial = new QSerialPort(this); 

    3)连接信号与槽 
        connect( serial, &QSerialPort::readyRead, this, 自定义的槽函数 );

    4)设置属性 
        一般需要设置串口的名称，波特率，数据位，奇偶校验、停止位、流控 
            serial->setPortName("/dev/ttySAC1");            //串口的名称
            serial->setBaudRate( QSerialPort::Baud9600 );   //波特率
            serial->setDataBits( QSerialPort::Data8 );      //数据位
            serial->setParity( QSerialPort::NoParity );     //奇偶校验
            serial->setStopBits( QSerialPort::OneStop );    //停止位
            serial->setFlowControl( QSerialPort::NoFlowControl );   //流控

    5)打开串口 
        serial->open( QIODevice::ReadWrite );   //以读写的方式 打开串口

        打开成功后，如果串口外接的设备有数据可读，那么serial对象自动发送一个信号readyRead,
        我们只需要在相应的槽函数中 读取数据即可 


=====================================
    GEC6818开发板的串口设备文件路径名：
                CON2  "/dev/ttySAC1"
                CON3  "/dev/ttySAC2"
                CON4  "/dev/ttySAC3"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38