QSS使用小结

一.参考链接

样式表语法
盒子模型
参考工具：QssEditor(预览样式效果)

二.QSS文件调用代码

QFile file(sPath);//qrc:/style.qss
file.open(QFile::ReadOnly);
QTextStream filetext(&file);
QString stylesheet = filetext.readAll();
qApp->setStyleSheet(stylesheet);

三.问题发现及解决思路

A.样式表不能设置QMainWindow标题栏背景色(程序的最外层边框加载的是系统本地的窗口)。
自定义标题栏。
B.连续加载可能有干扰。
C.qss文件中文注释致无效(notepad++上编辑，UTF-8编码)。
“/第十二部分 QProgressBar进度条/”
初步测试结果，结尾“*/”前中文字为奇数个则失效，猜测引起乱码。

四.各控件总结

4.1 QTabWidget

A.解决QTabWidget的pane背景部分设置无效(border:solid，border: none)

tab为上方标题栏，通过QTabBar设置。
pane为下方主体，通过QTabWidget设置，中间可以加ID。

QTabBar::tab {
    background:rgb(38,38,38);
	height:30px;
	padding:2px 12px;
	color:#fff;
	border-width:0;
}
QTabBar::tab:selected {
    background: rgb(54,54,54);
	border-color: #9B9B9B;
    border-bottom-color: #C2C7CB;
}

QTabWidget::pane {
	background: rgb(38,38,38);
	border-style: solid;
}
QTabWidget#tabWidgetMenuBar::pane {
    border-top: 0px solid #eee;
    border-width:0;
	background: rgb(54,54,54);
	padding:1px 1px;
}

/*invalid*/
QTabWidget::tab-bar {
       background: rgb(0, 160, 230);
       border: 4px solid;
}

/*invalid*/
QTabBar#tabBar::tab {
        border: 1px solid rgb(45, 45, 45);
        border-bottom: none;
        background: transparent;
}

//ui->tabWidget->setStyleSheet("QTabBar::tab:!selected{color:gray;}");//black lightgray
ui->tabWidget->tabBar()->setStyleSheet("QTabBar::tab:!selected{color:gray;}");
//ui->tabWidget->tabBar()->setStyleSheet("tab:!selected{color:gray;}"); 无效

ui->tabWidget->setStyleSheet("QTabBar::tab:disabled {width: 0; color: transparent;}");

4.2 QDockWidget

通过字体大小和padding调节标题栏高度

QDockWidget {
    font-size:9pt;
}
QDockWidget::title {
    padding:2px;
	background-color:rgb(38,38,38);
}

4.3 QScrollArea

分QScrollArea及里层的QWidget、QScrollBar。
QScrollArea、QWidget背景色为白色。

QScrollArea{
    background:transparent;
}
QWidget#scrollAreaWidgetContents{
	background:transparent;
}
QScrollBar:vertical {
    width: 20px;
    background: transparent;
    margin-left: 3px;
    margin-right: 3px;
}
QScrollBar::handle:vertical {
    width: 20px;
    min-height: 30px;
    background: gray;
    margin-top: 15px;
    margin-bottom: 15px;
}
QScrollBar::handle:vertical:hover {
    background: lightgray;
}
QScrollBar::sub-line:vertical {
    height: 15px;
    background: transparent;
    subcontrol-position: top;
}
QScrollBar::add-line:vertical {
    height: 15px;
    background: transparent;
    subcontrol-position: bottom;
}
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
    background: transparent;
}

4.4 QProgresssbar

设置进度条红色(trunk)