【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也没有特别深入的了解，相关博客也有很多但是大部分都需要会员积分，整合了网上比较多的文档发布一个比较初级的供大家参考，如果有什么不对和问题可以评论互动

谢谢观看。

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

相关文章

iconfont 转换为图标字体。

Qt QSS界面美化

爬取英雄联盟全皮肤

MCSkin3D我的世界皮肤制作器中文补丁

字体icon渐变色

png转字体图标

扭曲文字动态效果怎么制作？教程来了

html艺术字在线制作,超全的免费图标字体(在线图标字体制作)