1. 简介
一个完善的应用程序不仅有好用的功能还得有漂亮的外观,这样的应用程序才能吸引用户使用。
Qt中的样式表叫做QSS,它是HTML中CSS(Cascading style sheet,级联样式表|层叠样式表)的子集。
在Qt中可以把样式表直接写到ui中也可以使用setStyleSheet()在代码中进行设置
2. 在UI中设置样式表
在ui中对控件右击,打开改变样式表选项,在该选项面板中进行样式代码编写
3. 在代码中设置样式表
1. 代码中写
ui->pushButton->setStyleSheet("QPushButton{background-color: rgb(225, 225, 225););
例如:讲一个Libel裁剪为圆形
//标签添加图片
/*
这段代码首先将图片按照宽高中的较小值进行裁剪,并保持其纵横比。然后创建一个与裁剪后的图片尺寸相同的QBitmap,
并利用QPainter绘制一个圆形的遮罩。通过将遮罩应用到图片上,就可以实现将label标签变为圆形,并且照片的四角不会凸显出来。
最后,设置label标签的样式表,将其宽度、高度设置为100px,边框半径设置为50px,边框宽度为5px,边框颜色为黑色
*/
QPixmap image(":/StyleSheet14/image/pic3.jpg");
int size = qMin(image.width(), image.height());
QPixmap roundedImage = image.scaled(size, size, Qt::KeepAspectRatioByExpanding, Qt::SmoothTransformation);
QBitmap mask(roundedImage.size());
mask.fill(Qt::color0);
QPainter painter(&mask);
painter.setRenderHint(QPainter::Antialiasing, true);
painter.setPen(Qt::color1);
painter.setBrush(Qt::color1);
painter.drawRoundedRect(mask.rect(), size / 2, size / 2);
roundedImage.setMask(mask);
ui.label->setPixmap(roundedImage);
ui.label->setScaledContents(true);
const QString m_red_SheetStyle = "width: 100px; height: 100px; border-radius: 50px; border:5px solid black;";
ui.label->setStyleSheet(m_red_SheetStyle);
2. 从文件中读
例如:实现换肤操作
ChangeSkinWidget::ChangeSkinWidget(QWidget *parent)
: QMainWindow(parent)
{
ui.setupUi(this);
//创建文件读写对象QFile
m_pQssFile = new QFile(":/skinqss/styleqss/skin1.qss");
//读取文件内容
m_pQssFile->open(QFile::ReadOnly);
QString strQss = QString(m_pQssFile->readAll());
//设置样式给整个应用程序
qApp->setStyleSheet(strQss);
m_pQssFile->close();
}
ChangeSkinWidget::~ChangeSkinWidget()
{
if (m_pQssFile != nullptr)
{
delete m_pQssFile;
m_pQssFile = nullptr;
}
}
void ChangeSkinWidget::on_changeBTH_clicked()
{
if (m_pQssFile->fileName() == ":/skinqss/styleqss/skin1.qss")
{
m_pQssFile->setFileName(":/skinqss/styleqss/skin2.qss");
}
else
{
m_pQssFile->setFileName(":/skinqss/styleqss/skin1.qss");
}
m_pQssFile->open(QFile::ReadOnly);
QString strStyle = m_pQssFile->readAll();
qApp->setStyleSheet(strStyle);
m_pQssFile->close();
}
4. 样式表的语法
Qt样式表的术语和语法规则与HTML中的CSS基本相同。每个样式由选择器和声明组成。
1、类型选择器
-
该类型样式都会修改
-
多个类型用逗号分割
QPushButton //类型选择器
{
//声明
background-color: rgba(255, 3, 40,0.5);
color:red;
}
QCheckBox,QSpinBox //选择器可以写多个类型,用逗号分割
{
color:blue;
}
2、ID选择器
-
根据id修改指定的控件
-
属性名和属性值不区分大小写,多对属性名和值之间用分号分割
QPushButton#pushButton //ID选择器
{
//声明
background-color: rgba(255, 3, 40,0.5);
color:red;
}
QPushButton#pushButton,#pushButton_1//ID选择器
{
//声明
background-color: rgba(255, 3, 40,0.5);
color:red;
}
3、伪状态:
选择器可以包含伪状态来限制规则在部件的指定状态上应用。伪状态出现在选择器的后面,用冒号隔离,例如:QPushButton:pressed{},QPushButton:hover{}
伪状态可以用!来表示否定,例如QPushButton#pushButton_2:!hover{},表示在非悬浮状态是使用此样式。
3.1、三态
//正常状态
QPushButton#pushButton_4
{
background-image:url(:/StyleSheet14/image/login_btn_default.png);
background-color:transparent;//按钮背景色透明
background-position:center;//背景图片位置居中
background-repeat:norepeat;
}
//悬浮状态
QPushButton#pushButton_4:hover
{
background-image:url(:/StyleSheet14/image/login_btn_hover.png);
background-color:transparent;
background-position:center;
background-repeat:norepeat;
}
//点击状态
QPushButton#pushButton_4:pressed
{
background-image:url(:/StyleSheet14/image/login_btn_click.png);
background-color:transparent;
background-position:center;
background-repeat:norepeat;
}