QT IOS风格音乐播放器（二）QSS样式表的常规使用

谈到QT的界面美化，就不得不提QT的样式表，这里记录常用的样式表

一、通用样式

以下先介绍一些通用的，以QPushButton为例，如果要设置其他的模块，可以在将QPushButton改为别的

1、设置背景图片

QPushButton{background-image: url(:/pic/next.png);}

2、设置背景颜色

QPushButton{background-color: rgb(100,100,100);}

3、设置字体

QPushButton{font-family:'Microsoft YaHei UI';}

4、设置字体样式

normal：正常

italic：斜体

bold：粗体

QPushButton{font-style:normal;}

 

5、设置字体大小

QPushButton{font-size:40px;}

6、设置边框样式

none: 默认无边框

dotted: 定义一个点线边框

dashed: 定义一个虚线边框

solid: 定义实线边框

double: 定义两个边框。 两个边框的宽度和 border-width 的值相同

groove: 定义3D沟槽边框。效果取决于边框的颜色值

ridge: 定义3D脊边框。效果取决于边框的颜色值

inset:定义一个3D的嵌入边框。效果取决于边框的颜色值

outset: 定义一个3D突出边框。 效果取决于边框的颜色值

QPushButton{border-style:solid}

7、设置边框宽度

QPushButton{border-width:5px}

8、设置边框颜色

name - 指定颜色的名称，如 "red"

RGB - 指定 RGB 值, 如 "rgb(255,0,0)"

Hex - 指定16进制值, 如 "#ff0000"

还可以设置边框的颜色为"transparent"，继承至父类

QPushButton{border-style:solid;border-color:rgb(255,255,0);}

二、指定部件的样式

1、部件的三种状态

普通，鼠标进入，鼠标按下，可以分别设置其style，以QPushButton为例，其他部件也是通用的

QPushButton{border-image: url(:/pic/next.png);}
QPushButton::pressed{border-image: url(:/pic/isnext.png);}
QPushButton:hover{
border-image: url(:/pic/next_hover.png);}

2、QSlider

QSlider可以指定槽(groove)，滑块(handle)，滑过部分(sub-page)，未划过部分(add-page)的样式

QSlider::groove:horizontal{ 
border-image: url(:/pic/soundslider.png);
height: 22px; 
 
} 
QSlider::handle:horizontal{ 
border-image: url(:/pic/soundscol.png);
height: 6px; 
width:  22px;
margin: 0px; 
 }
QSlider::sub-page:horizontal {
border-image: url(:/pic/subsound.png);
}

3、QListWidget

可以设置列表内item的样式

QListView::item{height:50px;}

隐藏列表的边框

QListView{border:hidden;}

4、QScrollBar(滚动条)

对于表格，文本框等的滚动条，同样可以设置滑块，划过部分和未划过部分，设置上下箭头

设置隐藏上下箭头（将箭头颜色设置为和滚动条颜色相同）

QScrollBar:vertical{
    width:10px;
	background-color:rgb(25,25,25);
    padding-top:0px;
    padding-bottom:0px;
}
QScrollBar::add-line:vertical{
background-color:rgb(25,25,25);}
QScrollBar::sub-line:vertical{
background-color:rgb(25,25,25);}

设置滑块

QScrollBar::handle:vertical{
    width:10px;
	border-image: url(:/pic/scroll.png);
	border-radius:4px;
    min-height:20;
}

设置滑过与未滑过的部分

QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical
{
    background:rgb(0,0,0,10%);
    border-radius:4px;
}

5、当一个父类部件内部有多个相同类型的子类时，可以指定特定名字的子类设置样式

如下为指定名为widget_2的部件的样式

QWidget#widget_2{border-image: url(:/pic/playerBar.png);}

三、样式表的使用

可以通过qt disigner中，右键点击某个部件，改变样式表，进行设置

可以通过setStyleSheet函数添加样式表

也可以直接添加qss文件