Qt 添加 样式（styleSheet）

Qt 添加 样式（styleSheet）

在学习Qt的过程中，在Qt Creator里面，通过选择UI或者对应的里面的控件，在其属性中，即styleSheet中，在随后弹出的对话框中可以编辑样式，非常好用！

在styleSheet中编辑具体的样式表，在这里面编辑的样式还能随时看到这个样式是否正确，编辑完样式回到前面就会看到生效的样式！

附：一个widght中总的样式

里面Hz这个QLabel单独的样式
附：总的介绍
Qt样式表的术语和语法规则与HTML CSS基本相同。

一、样式规则
样式表包含了一系列的样式规则，每个样式规则由选择器（Sekector)和声明（declaration)组成。选择器制定了受规则影响的部件，声明指定了这个部件上要设置的属性。例如：

QPushButton{color:red}这个规则指定了QPushButton和它的子类使用红色作为前景色。多个选择器(用逗号隔开）可以指定相同的声明，如下

QPuButton,QLineEdit,QComBox{color：red}

声明部分也可以指定多个属性，用分号隔开如下

QPushButton{color:red；background-color:white}

选择器可以包含子控件来对部件的特定子控件应用规则，例如

QComboBox::drop-down{image:url(dropdown.png)}这样的规则可以改变所有QComboBox部件下拉按钮的演示。

选择器可以包含伪状态（用冒号与选择器隔离）来限制规则在部件的指定状态上应用，例如

QPushButton:hover{color:white}表明当鼠标悬停在一个QPushButton上时前景色白色。

QPushButton:！hover{color:red}表明当鼠标没有悬停在一个QPushButton上时前景色红色。

二、使用代码设置样式表
样式表可以使用QApplication::setStyleSheet()函数将其设置到整个应用程序上，也可以使用QWeget::setStyleSheet()函数将其设置到一个指定部件上。例如下面代码

//设置pushhbutton的背景色为黄色
ui->pushButton->setStyleSheet(“background:yellow”);
//设置horizontalslider的背景色为蓝色
ui->horizontalSlider->setStyleSheet(“background:blue”);
设置了两个部件的背景色，上面样式也可以在QApplication中设置 ，代码如下

qApp->setStyleSheet(“QPushButton{background:yellow}QSlider{background:blue}”)
三、在设计模式中使用样式表
在界面上右击，在弹出的级联菜单中选择“改变样式表”会出现编辑样式表对话框。

在其中输入QPushButton{},光标停在第一个大括号后，然后单击“添加颜色”选项后面的下拉箭头，在弹出的列表中选择background-color项，在颜色选择对话框中选择颜色。同样的方法还可以使用图片使用渐变色。在编辑样式表中给QPushunButton指定背景色为蓝色，QSlider背景色为渐变中的Waves,设置完后样式表如下

效果图如下

四、自定义部件外观与qss文件换肤
自定义部件外观

新建Qt Widget应用项目mystylesheet,基类为QMainWindow.进入设计模式拖入一个QPushButton 和Horizontal Slider，向项目中添加Qt 资源文件myresource,建立完成后，添加前缀/image，然后添加文件，添加4张图片。

进入设计模式，右击进入编辑样式表对话框，编辑样式如下

/主界面背景*****/
QMainWindow{
/背景图片/

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

}
/按钮部件*****/
QPushButton{
/背景色/
background-color: rgba(100, 255, 100, 30);
/边框样式/
border-style:outset;
/边框宽度为4像素/
border-width:4px;
/边框圆角半径/
border-radius:10px;
/边框颜色/
border-color: rgba(255, 255, 255, 30);
/字体/
font:bold 14px;
/字体颜色/
color: rgba(0, 0, 0, 100);
/填衬/
padding:6px;
}
/鼠标悬停在按钮上时/
QPushButton:hover{
background-color: rgba(100, 255, 100, 100);
border-color: rgba(255, 255, 255,200);
color:rgba(0,0,0,200);
}
/按钮被按下时/
QPushuButton:pressed{
background-color: rgba(100, 255, 100, 200);
border-color: rgba(255, 255, 255, 30);
border-style:inset;
color:rgba(0,0,0,100);

}
/**************滑块部/
/水平滑块的手柄/
QSlider::handle:horizontal{
image: url(:/image/parking.png);
}
/水平滑块手柄以前的部分/
QSlider::sub-page:horizontal{
/边框图片/
border-image: url(:/image/enroutex.png);
}

运行效果如下

注意，如果这一步不能显示背景图片，去Qt的项目中构建设置中，Shandow build勾选项去掉，不要勾选！不要勾选！不要勾选！

qss文件实现换肤

Qt样式表可以放在一个以.qss为后缀的文件中，然后在程序中调用不同的qss实现动态换肤。

在上面的项目中去掉编辑样式表对话框中的所有样式。新建两个文件my.qss和my1.qss，添加到资源文件下。qss文件中的内容就是上面编辑样式表对话框中的样式，my1.qss与my.qss稍作改动。往QMainWIndow中添加成员变量

QFile* qssFile;
QMainWIndow构造函数中根据my.qss设置样式，代码如下

qssFile=new QFile(":/qss/my.qss",this);
qssFile->open(QFile::ReadOnly);
QString styleSheet=QString(qssFile->readAll());
qApp->setStyleSheet(styleSheet);
qssFile->close();

在pushubutton的click槽函数中，换肤，代码如下

void MainWindow::on_pushButton_clicked()
{
// qDebug()<<“Test***********************”;
if(qssFile->fileName()==":/qss/my.qss")
{
qssFile->setFileName(":/qss/my1.qss");
}
else
{
qssFile->setFileName(":/qss/my.qss");
}
qssFile->open(QFile::ReadOnly);
QString styleSheet=QString(qssFile->readAll());
qApp->setStyleSheet(styleSheet);
qssFile->close();
}