Qt样式表

1  简介

参考视频:https://www.bilibili.com/video/BV1XW411x7NU?p=27

样式表的作用就是为了让我们的控件变得好看。给窗口设置风格、颜色、图片等。

2  使用方式

使用控件的setStyleSheet方法来进行样式的设置。

用法:void setStyleSheet(const QString &styleSheet)

其中styleSheet是符合某种规范的字符串,用法和HTML CSS差不多,

可以通过查看帮助文档中的例子来学习。

3  举例说明

1)以QLabel为例进行说明

设置字体颜色、背景色、以及背景图片:

1     ui->label->setStyleSheet("QLabel{color:red;"  //前景色
2         "background-color:black;"  //背景色
3         "background-image :url(:/new/prefix1/superman.jpg);"  //背景图片,自动伸缩
4         "}");

把窗口最大化,效果如下:

可以看出,背景图片的大小不会跟着窗口的大小自动伸缩,这里我们就要用到盒子模型才行。

2)盒子模型

补充说明一下,什么是盒子模型,官方说明如下:

大致意思是:我们使用样式表时,每一个控件被当作一个盒子,只不过我们看不到,模型如下:

其中,margin、border-width、padding默认是设置为0的。如果我们要让背景随着窗口的大小自动伸缩,我们需要使用“border-image”,我们更改代码测试一下:

1     ui->label->setStyleSheet("QLabel{color:red;"  //前景色
2         "background-color:black;"  //背景色
3         "border-image:url(:/new/prefix1/superman.jpg);"  //背景图片,自动伸缩
4         "}");

也把窗口最大化,可以看出,背景图片随着窗口可以进行自动伸缩。

盒子模型的其它用法,我现在不熟悉,就不说明了。

3)伪状态 Pseudo-States

简单的说,伪状态就是基于控件不同的状态我们可以设置不同的样式,以按钮为例进行说明,例如:我们将鼠标放在按钮上时可以显示一个背景,点击按钮可以显示一个背景,释放按钮可以显示一个背景。

下面就简单说说代码的实现:

1     ui->pushButton->setStyleSheet("QPushButton{ border-image:url(:/new/prefix1/close.png);}"
2                                   "QPushButton:hover{ border-image:url(:/new/prefix1/status.png);}"
3                                   "QPushButton:pressed{ border-image:url(:/new/prefix1/open.png);}"
4                                   );

上面的代码的运行结果:

 每种控件的样式表都不相同,很多我也不知道,需要用到的时候去查帮助文档即可。

posted @ 2020-06-24 00:02  zhengcixi  阅读(391)  评论(0编辑  收藏  举报
回到顶部