QT布局以及使用QSS

时间：2022-12-21 14:47:03

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

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

     QT布局以及使用QSS

     界面配色有点丑QT布局以及使用QSS，整个界面我是使用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更加方便，但是如果使用的是较为复杂的布局，那么使用代码布局将会更加的方便进行修改，后期如果需要修改的话那么耗时以及精力就会需要的更少。


标签：

相关文章