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

QT的简介

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

官网 www.qt.io 

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

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

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

    开发框架：
        有现成的库可供使用，提高开发效率 

1.第一个QT程序

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

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

    添加模块： 
        QT += widgets

3)第一个应用程序 

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

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

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

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

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

            return 0;
        }

点击“运行”  Ctrl + r 

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     对话框 

                控件类
                    菜单、工具栏、状态栏、按钮、文本框、标签、组合框架 ...
                    所有的控件都应该出现在某个界面上

3.pro文件

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

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构建目录，再重新编译

QT常用操作教程

1、常用的控件

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

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

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

            预览 快捷键： Alt Shift r 

            选中控件，右键 --》 转到槽 

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() ... 

3、定时器 QTimer

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

加载头文件 
    #include <QTimer>

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

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

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

启动定时器 
    timer->start() 

停止定时器 
    timer->stop() 

典型的应用的应用：
    获取并显示当前的系统时间

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("样式规则")


常用的样式规则的示例：

       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;       //透明
        }

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

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

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

3）使用资源 
    右键ui界面 --》 改变样式表 --》 添加资源 ，有三种效果 
        background-image        平铺 
        border-image            拉伸 
        image                   居中
        根据需要 选择其中之一 即可 

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
        用于处理数据库错误，提供可读的错误信息 


连接数据库的典型代码：

       //初始化连接对象，使用静态函数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;
        }

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

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

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

            //确保一开始显示的是登陆界面
            ui->stackedWidget->setCurrentWidget(ui->page_login);

7、串口

帮助文档 Qt Serial Port 

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

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

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

    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"