QT布局以及使用QSS

         最近花了一周的时间学习了QT，学习的结果是能够使用它进行一些简单的界面开发，其实在学习的过程中发现QT的功能还是挺强大的，但因为学习的时间太短，可能它的精髓还没有能够体会到，现在想要把这段时间学习的心得体会记录一下，以便将来使用时可能会用到。

做了一个简单的界面，界面的大致情况如下图所示：

     

     界面配色有点丑，整个界面我是使用QSplitter进行分隔的，分成了四个板块，分别是左边的Control，上边的Toolbar、中间的Content以及下面的TextButtom, Control、ToolBar、Content我都分别创建了三个单独的类用于他们的布局以及功能的完善，最终在MainWindow中进行最终的布局，在这里遇到过一个问题，就是在MainWindow中布局的时候，当时没有布局的显示，最后需要加上这句话setCentralWidget(splitterMain);  即把主要的窗口放到MainWindow的CentralWidget中，代码如下：

    

    splitterMain = new QSplitter(Qt::Vertical,this);    splitterTop = new QSplitter(Qt::Horizontal,splitterMain);    textButtom = new QTextEdit(splitterMain);    textButtom->setAlignment(Qt::AlignLeft);    splitterMain->setStretchFactor(0,8);    splitterMain->setStretchFactor(1,2);    Control *control = new Control(splitterTop);    splitterRight = new QSplitter(Qt::Vertical,splitterTop);    splitterTop->setStretchFactor(0,2);    splitterTop->setStretchFactor(1,15);    ToolBar *toolbar = new ToolBar(splitterRight);    Content *content = new Content(splitterRight);    splitterRight->setStretchFactor(1,1);    splitterRight->setStretchFactor(1,9);    setCentralWidget(splitterMain);    toolbar->setObjectName(tr("toolbar"));

     QT中核心的就是信号（SIGNAL)与槽(SLOT)的概念，这样可以将不同的函数之间的关系通过信号与槽连接在一起，在Control中，通过将按钮与相对应的槽函数连接起来，当按钮被按下时发送相对应的信号，在主函数中又将该信号同需要执行的函数进行连接，这样就可以实现界面与函数之间的关联了。

     QCustomPlot是一个十分有用的绘图控件，我在content中用到了QCustomPlot进行数据的绘制，使用QCustonPlot很方便，只需要在其中加上qcustomplot.hqcustomplot.cpp就可以，QCustomPlot可以绘制比较复杂的图像，我在本例中只是简单的使用了key-value，关于QCustomPlot的使用今后我会继续学习，在这里就不做 赘述。

     在这里我想要着重说明的是对QT界面的美化，使用的是setStyleSheet，并将所有的界面配置信息都放到了一个资源文件skin.qss当中，程序中只需要加载这个资源文件就可以实现对界面的weight进行美化，这样就很方便的将程序和美化分离开来，也方便之后的修改。

     在main函数中对skin.qss的调入代码如下：

      

#include "mainwindow.h"#include <QApplication>#include <QObject>#include <QSize>#include "control.h"#include "toolbar.h"#include "content.h"#include <QFile>#include <QStyleFactory>#include <QTextStream>bool setSkin(QApplication* const app, QString const &skinFile){    QFile file(skinFile);    if (QFile::exists(skinFile) && file.open(QIODevice::ReadOnly))    {        QApplication::setStyle(QStyleFactory::create("Windows"));        QString strTemp;        QTextStream in(&file);        while (!in.atEnd())        {            strTemp.append(in.readLine());        }        file.close();        app->setStyleSheet(strTemp);    }    else    {#ifdef Q_WS_MAC        qDebug("%s: %s: File does not exist %s... setting mac style...",               __FILE__, __FUNCTION__, qPrintable(skinFile));        app->setStyle(new QMacStyle());        return true;#else        qDebug("%s: %s: File does not exist or failed to open %s",               __FILE__, __FUNCTION__, qPrintable(skinFile));        return false;#endif    }    return true;}int main(int argc, char *argv[]){    QApplication a(argc, argv);    QFont font("ZYSong18030",8);    a.setFont(font);    MainWindow w ;    w.resize(QSize(1000,700));        //加载应用皮肤    setSkin(&a ,("skin.qss"));    w.show();    return a.exec();}

       这样就能够把skin.qss加载到程序当中，而本界面中的skin.qss的相关代码如下：

QPushButton{        color:white;        background:#6495ED;        border-width: 1px;        border-radius: 5px;        border-color: black;        padding: 1px;        font-weight:bold;}QPushButton::hover{          background:#4169E1;       border-color:black;}   QPushButton::disabled{      background: silver;      border-color:black;      color:black;}QLabel{      border: 1px solid #32435E;      border-radius: 3px;      color: white;      font-weight:bold;      background:#212C3F;}QMainWindow{      background:#DCDCDC;}QSplitter::handle{      background-color:#A9A9A9;}QCheckBox{      font-weight:bold;}QCheckBox::indicator{      width:70px;      height: 30px;}QCheckBox::indicator::unchecked{ font-weight:bold;      image: url(:/images/unchecked);}QCheckBox::indicator::checked{      image: url(:/images/checked);}QLineEdit{      border: 1px solid #32435E;      border-radius: 3px;      background:white;      selection-background-color: #0A246A;}QTextEdit{      border: 1px solid #32435E;      border-radius: 3px;      background:white;      selection-background-color: #0A246A;}QComboBox {      border: 1px solid #32435E;      border-radius: 3px;      padding: 1px 18px 1px 3px;      min-width: 6em;}QComboBox::hover{      border-color:#5D8B9E;}QComboBox QAbstractItemView {      border: 2px solid #32435E;      selection-background-color:#6495ED;      background: white;}

      在其中用到的图片是通过加载到QT资源文件的方式加载进去的，使用起来较为方便。

      当然，一周的成品效果并没有太好，因为是通过纯代码的方式进行的布局，因此相对使用QT Designer 来说相对耗时一些，但个人觉得使用代码更加灵活，如果只是简单的布局当然是使用Designer更加方便，但是如果使用的是较为复杂的布局，那么使用代码布局将会更加的方便进行修改，后期如果需要修改的话那么耗时以及精力就会需要的更少。