Qt中QSS常用设置

本文介绍Qt中QSS常用设置。

QSS英文全称：Qt Style Sheet，用于修改控件外观，美化界面，为Qt应用程序特有。熟练使用QSS可以为我们快速设计满意的界面提供方便。本文针对Qt应用程序开发过程中常用的控件，介绍QSS常用设置。

Qt提供了详细的文档支持，可在Help中搜索“Qt Style Sheets”，查看具体某个控件的QSS设置方法和设置例程。

1.通用设置

通用设置主要针对Qt所有控件的设置。可以在“Object”前加“#”用于指定是哪个对象，防止某些控件（如QDialog，QMainWindow）其上的控件也被设置相同的背景，代码如下：

#SettingWindow {
	border-image: url(:/background/SettingWindow.png);
}

1)设置背景图片

使用url指定图片位置，前提需将资源加入工程。

按控件border区域的长宽比来缩放图片，保证填充满控件border区域：

border-image: url(:/background/SettingWindow.png);

按图片实际尺寸显示图片，超出控件显示区域的部分会被裁剪掉：

background-image: url(:/background/SettingWindow.png);

按图片原长宽比来缩放图片，保证填充满控件content区域：

image: url(:/background/SettingWindow.png);

2)背景颜色

background-color: rgb(24, 24, 25);

3)文字对齐

左对齐：

text-align:left

中心对齐：

text-align:center

右对齐：

text-align:right

4)字体

颜色：

color:rgb(255,255,255);

字体：

font-family:"New Century Schoolbook";

字体大小：

font-size:40px;

字体风格：

font-style:italic;

字体粗细：

font-weight:500;

100-900之间的数字，400:normal，700:bold

2.QPushButton

1)指定按钮图片及按下后的图片：

#btnReset{
	border-image: url(:/icon/ResetNormal.png);
}

#btnReset:pressed {
	border-image: url(:/icon/ResetPressed.png);
}

2)将按钮设置成透明无边框

#btnTest {
    background-color: rgba(255, 255, 255, 0);
    border: none;
}

其中，rgba()的alpha被设置为0，表示透明，而rgb被分别设定为255，255，255表示白色，综合就是白色的透明色。

3)设置按钮图标

#btnTest {
    qproperty-iconSize: 16px 16px;
    qproperty-icon:url(:/icon/close.png);
}

3.QLabel

指定字体颜色：

#lbTest {
	color: rgb(255, 255, 255);
}

4.QScrollBar

指定滑块宽度：

QScrollBar::vetical {
    width:40px;
}

5.QSlider

自定义Slider：

QSlider::groove:horizontal {
    border: 1px solid #999999;
    height: 8px; /* the groove expands to the size of the slider by default. by giving it a height, it has a fixed size */
    background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4);
    margin: 2px 0;
}

QSlider::handle:horizontal {
    background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #b4b4b4, stop:1 #8f8f8f);
    border: 1px solid #5c5c5c;
    width: 18px;
    margin: -2px 0; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */
    border-radius: 3px;
}

待添加。

总结，本文介绍了Qt中QSS常用设置。