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_MACqDebug("%s: %s: File does not exist %s... setting mac style...",__FILE__, __FUNCTION__, qPrintable(skinFile));app->setStyle(new QMacStyle());return true; #elseqDebug("%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更加方便，但是如果使用的是较为复杂的布局，那么使用代码布局将会更加的方便进行修改，后期如果需要修改的话那么耗时以及精力就会需要的更少。

总结

以上是生活随笔为你收集整理的QT布局以及使用QSS的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。