2023年7月11日发(作者：)

QTIOS风格⾳乐播放器（⼆）QSS样式表的常规使⽤谈到QT的界⾯美化，就不得不提QT的样式表，这⾥记录常⽤的样式表⼀、通⽤样式以下先介绍⼀些通⽤的，以QPushButton为例，如果要设置其他的模块，可以在将QPushButton改为别的1、设置背景图⽚QPushButton{background-image: url(:/pic/);}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/);}QPushButton::pressed{border-image: url(:/pic/);}QPushButton:hover{border-image: url(:/pic/next_);}2、QSliderQSlider可以指定槽(groove)，滑块(handle)，滑过部分(sub-page)，未划过部分(add-page)的样式QSlider::groove:horizontal{

border-image: url(:/pic/);height: 22px;

}

QSlider::handle:horizontal{

border-image: url(:/pic/);height: 6px;

width: 22px;margin: 0px;

}QSlider::sub-page:horizontal {border-image: url(:/pic/);}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/); 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/);}三、样式表的使⽤可以通过qt disigner中，右键点击某个部件，改变样式表，进⾏设置可以通过setStyleSheet函数添加样式表也可以直接添加qss⽂件