之前完成的QT程序完成逻辑控制后,界面全都使用图片填充的方式来做美化,但是使用到的组件看上去很丑,因此上网简单学习之后做总结如下:(之前也未学习过CSS等知识属于纯小白,如有错误,不吝赐教)。
1.新建工程(略)
新建一个工程用于本次demo的学习。使用的是qweight,并且在文件目录内新建文本,重命名为qss.qss。
2.添加资源文件并读取QSS文件
新建资源文件,并将刚新建的QSS文件加入到目录中。
之后在weight构造函数里添加如下代码:
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
QFile file(":/qss.qss");
file.open(QFile::ReadOnly);
if(file.isOpen()){
QString styleSheet = QLatin1String(file.readAll());
qApp->setStyleSheet(styleSheet);
file.close();
qDebug() << "success";
}
else
{
qDebug()<< "error";
}
}
头文件里需要引入QFile和QDebug。使用QFile打开qss文件,如果打开成功,使用qstring读文件中的内容,用qApp->setStyleSheet解析qss文件。运行后控制台打印success第一步就成功啦。
3.qss文件编写验证
现在ui中添加如下组件方便后续进行qss功能验证:
编译运行后效果如下:
在qss.qss文件中添加如下代码:
*{
background-color: rgb(80, 80, 80);
}
再次编译运行后:
至此成功使用qss文件改变ui界面就完成啦。至于其他的qss所能使用的功能可以查阅相关手册。
另附其他一些简单用法:
qss文件(添加一些按钮点选的样式改变)
*{
background-color: rgb(100, 100, 100);
}
#toolBar {
background-color: rgb(25, 25, 25);
}
#toolBar QPushButton{
color: rgb(250, 250, 250);
background-color: transparent;
}
#toolBar QPushButton:hover{
color:rgb(255, 170, 0);
}
#toolBar QPushButton:pressed{
background-color: rgba(255, 255, 255, 80);
}
#toolBar QPushButton#btnClose:hover{
color: rgb(255, 0, 0);
}
使用效果:
注:toolBar为Layout,需要更改该类为QWeight。
最后感谢大佬提供的学习资料:Qt样式表(QSS)Demo:黑色扁平风格_龚建波的博客-CSDN博客_qss样式表demo