【Qt一键界面美化】qss使用与qss界面美化

qss界面美化,没接触过qss的朋友可以先查看css的相关知识在阅读代码，如果你不想那么麻烦只是希望能简单的对界面进行美化，可以直接使用代码，废话不多说，直接上效果。

 

  该qss文本对，按钮控件QPushButton，场景QGraphicsView，复选框QCheckBox，滚动条-垂直QScrollBar，滚动条-水平QScrollBar，时间戳控件QDateTimeEdit，输入框QLineEdit，文本label，表头QHeaderView，表格QTableView，都进行了文字色彩，背景色，边框圆滑度进行了调整与设置，代码如下     

/**********表头**********/
QHeaderView{
        border: none;
        border-bottom: 3px solid rgb(0, 160, 230);
        background: rgb(57, 58, 60);
        min-height: 30px;
        color : #EEEEEE
}
QHeaderView::section:horizontal {
        border: none;
        color: white;
        background: transparent;
        padding-left: 5px;
}
QHeaderView::section:horizontal:hover {
        background: rgb(85, 85, 85);
}
QHeaderView::section:horizontal:pressed {
        background: rgb(80, 80, 80);
}
QHeaderView::up-arrow {
        width: 13px;
        height: 11px;
        padding-right: 5px;
        subcontrol-position: center right;
}
QHeaderView::down-arrow {
        width: 13px;
        height: 11px;
        padding-right: 5px;
        subcontrol-position: center right;
}

/**********表格**********/
QTableView {
        border-radius: 4px;
        border: 1px solid rgb(45, 45, 45);
        background: rgb(57, 58, 60);
        gridline-color: #EEEEEE;
        color : #EEEEEE;
}

QTableView::item:selected {
        background: rgba(255, 255, 255, 40);
}


/**********滚动条-水平**********/
QScrollBar:horizontal {
        height: 20px;
        background: transparent;
        margin-top: 3px;
        margin-bottom: 3px;
}
QScrollBar::handle:horizontal {
        height: 20px;
        min-width: 30px;
        background: rgb(68, 69, 73);
        margin-left: 15px;
        margin-right: 15px;
}
QScrollBar::handle:horizontal:hover {
        background: rgb(80, 80, 80);
}
QScrollBar::sub-line:horizontal {
        width: 15px;
        background: transparent;
        image: url(:/Black/arrowLeft);
        subcontrol-position: left;
}
QScrollBar::add-line:horizontal {
        width: 15px;
        background: transparent;
        subcontrol-position: right;
}
QScrollBar::sub-line:horizontal:hover {
        background: rgb(68, 69, 73);
}
QScrollBar::add-line:horizontal:hover {
        background: rgb(68, 69, 73);
}
QScrollBar::add-page:horizontal,QScrollBar::sub-page:horizontal {
        background: transparent;
}

/**********滚动条-垂直**********/
QScrollBar:vertical {
        width: 20px;
        background: transparent;
        margin-left: 3px;
        margin-right: 3px;
}
QScrollBar::handle:vertical {
        width: 20px;
        min-height: 30px;
        background: rgb(68, 69, 73);
        margin-top: 15px;
        margin-bottom: 15px;
}
QScrollBar::handle:vertical:hover {
        background: rgb(80, 80, 80);
}
QScrollBar::sub-line:vertical {
        height: 15px;
        background: transparent;
        subcontrol-position: top;
}
QScrollBar::add-line:vertical {
        height: 15px;
        background: transparent;
        subcontrol-position: bottom;
}
QScrollBar::sub-line:vertical:hover {
        background: rgb(68, 69, 73);
}
QScrollBar::add-line:vertical:hover {
        background: rgb(68, 69, 73);
}
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
        background: transparent;
}

QScrollBar#verticalScrollBar:vertical {
        margin-top: 30px;
}


/**********复选框**********/
QCheckBox{
        spacing: 5px;
}
QCheckBox:enabled{
        color: rgb(175, 175, 175);
}
QCheckBox:enabled:hover{
        color: rgb(200, 200, 200);
}
QCheckBox:!enabled{
        color: rgb(155, 155, 155);
}
QCheckBox::indicator {
        width: 20px;
        height: 20px;
}

/**********输入框**********/
QLineEdit{
        border-radius: 4px;
        height: 25px;
        border: 1px solid rgb(100, 100, 100);
        background: rgb(72, 72, 73);
}
QLineEdit:enabled {
        color: rgb(175, 175, 175);
}
QLineEdit:enabled:hover, QLineEdit:enabled:focus {
        color: rgb(230, 230, 230);
}
QLineEdit:!enabled {
        color: rgb(155, 155, 155);
}



/**********按钮**********/
QPushButton{
        border-radius: 4px;
        border: none;
        width: 75px;
        height: 25px;
        background: rgb(68, 69, 73);
        color: #EEEEEE;
}
QPushButton:!enabled {
        background: rgb(100, 100, 100);
        color: rgb(200, 200, 200);
}
QPushButton:hover{
        background: rgb(85, 85, 85);
}
QPushButton:pressed{
        background: rgb(80, 80, 80);
}

/**********文字**********/
QLabel{
    color: #EEEEEE;
    border-radius: 4px;
}

/**********label显示背景**********/
QLabel#label_pic1{
    background-color: #515151;
}
QLabel#label_pic2{
    background-color: #515151;
}

/**********场景**********/
QGraphicsView{
    background: #2E2E2E;
    border: 1px solid #2E2E2E;
    border-radius: 4px;
}

/**********时间戳**********/
QDateTimeEdit{
    background: #515151;
    border: 1px solid rgb(100, 100, 100);
    border-radius: 4px;
    color: #EEEEEE;
}

   

  本qss代码不涉及指定id控件和url图片的部分，直接可用。大家也可以根据代码进行微调和添加所需的变化。

  使用方法如下新建一个.qss文件，把代码写入到文件中,把写好的qss文件放到你的工程目录文件夹下，并在你的qt工程里新建一个Resource文件，会自动创建一个文件夹，已经创建好Resource文件夹的可以跳过这一步

 添加后在文件夹中加入现有文件，把之前添加好的qss加入

  加入好后在可以需要添加的窗口中读取qss文件并用setStyleSheet函数插入

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QFile res_file("../jtqss.qss");
    if(res_file.open(QIODevice::ReadOnly))
    {
        a.setStyleSheet(res_file.readAll());
        qDebug() << "qss file load succes";
    }
    res_file.close();

    Widget w;

    QPalette pal(w.palette());
    pal.setColor(QPalette::Background, QColor(30, 30, 25));
    w.setAutoFillBackground(true);
    w.setPalette(pal);
    w.show();

    return a.exec();
}

   主要代码是

QFile res_file("../jtqss.qss");
    if(res_file.open(QIODevice::ReadOnly))
    {
        a.setStyleSheet(res_file.readAll());
        qDebug() << "qss file load succes";
    }
    res_file.close();

  还有一定要加上

    QPalette pal(w.palette());
    pal.setColor(QPalette::Background, QColor(30, 30, 25));
    w.setAutoFillBackground(true);
    w.setPalette(pal);

  这一段是设置窗口背景色的，如果不加上看对比图

什么都不加，即不加qss文件，也不设置界面背景色效果如下

  嗯，非常的原始 ，右上角的QchartsVeiw控件我还是已经用控件自带的设置主题函数设置过的了，没设置过的话更加是一片白。

  这篇博客也是我刚接触qss学习上的一个记录，对qss也没有特别深入的了解，相关博客也有很多但是大部分都需要会员积分，整合了网上比较多的文档发布一个比较初级的供大家参考，如果有什么不对和问题可以评论互动

  谢谢观看。