Qt 添加 样式(styleSheet)

article/2025/10/14 12:32:21

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();
}


http://chatgpt.dhexx.cn/article/lJYp21J1.shtml

相关文章

injected stylesheet 导致页面样式异常

问题现象&#xff1a;如果你在开发过程中遇到页面中某个控件样式异常了&#xff08;无法正常显示&#xff09;&#xff0c;然后打开浏览器控制面板&#xff0c;发现一大片灰色字体的&#xff0c;并且右上方还写着injected stylesheet&#xff0c;如下图所示&#xff1a; 这有…

社区版IDEA创建stylesheet文件

社区版IDEA是不能直接创建stylesheet文件的&#xff0c;可以通过新建文件&#xff1a;文件名.css后缀。另外社区版IDEA在写css文件时是没有提示的&#xff0c;完全手敲。 1、 2、 将css文件链接到HTML文件中的方法&#xff1a; <link rel"stylesheet" href&quo…

qt designer stylesheet 设置字体加粗无效

估计是qt designer的bug&#xff0c;qt designer stylesheet 设置字体加粗无效。 解决办法是在右侧的属性窗口对字体进行加粗设置&#xff0c;注意需要将stylesheet里面对字体的加粗设置删除。

QT styleSheet image属性不生效问题

目录 前言修改 前言 想要在QToolButton stylesheet上面实现&#xff0c;在ui编辑界面上给QToolButton添加Icon属性和setautoraise为true的效果。如图 这样的效果是图片大小不会随着QToolButton变大而变化&#xff0c;但是会随着QToolButton缩小而变小。所以在styleSheet中要…

“user agent stylesheet“问题

“1、user agent stylesheet”问题 昨天在用F12调试css的时候&#xff0c;发现了自己写的很多样式都被这个“user agent stylesheet”覆盖了&#xff0c;写的样式都无效了&#xff0c;垂死挣扎了很久&#xff0c;还是未果o(╥﹏╥)o… … 【就是这样式的 ↓↓↓】 2、user agen…

QtDesigner中的styleSheet

一、为单个控件添加样式 QLabel{ color:black; font: 75 9pt "微软雅黑"; border-radius: 5px; radius:2px; background:qlineargradient(x1:0, y1:0, x2:1, y2:0,stop:0 rgb(112, 144, 101),stop:1 rgb(107, 255, 119)); }二、为整个软件的同类控件添加样式 2.1 添…

Qt StyleSheet的设置方法

Qt设置StyleSheet的方法值得探索一下&#xff0c;现在先完成主要的内容&#xff0c;以后再进行细调吧。 Qt设置按钮为圆形https://www.cnblogs.com/tsh292278/p/11275819.html 通过Qt 的样式表实现圆形按钮&#xff0c;其也可以实现圆角按钮&#xff0c;当然也可以使用其他的…

qt QTableWidget stylesheet

自己写了一个函数&#xff0c;封装QTableWidget的样式&#xff0c;根据自己的需求进行修改单元格的文字颜色、背景颜色等。 I wrote a function to encapsulate the style of QTableWidget and modify the text color and background color of the cell according to my own r…

styleSheet简单介绍

styleSheet可以方便修改样式 要整体修改QPushButton可以如下&#xff1a; QPushButton{border: 2px solid gray;border-radius: 10px;padding: 0 8px;background: yellow; } 要单独修改QPushButton: QPushButton#pushButton_2{border: 2px solid gray;border-radius: 10px;p…

root stylesheet报错

当/deep/语法报root stylesheet错时&#xff0c; 原因&#xff1a;因为使用了less或scss的原因&#xff0c; 解决方式&#xff1a;使用 ::v-deep代替 /deep/

QPushButton的styleSheet格式

有时候要改变Qt界面控件的样式&#xff0c;可以修改styleSheet来实现。 可以在主界面修改样式&#xff0c;那么主界面上的所有QPushButton都会修改样式的。 QPushButton {color: white;background-color: #27a9e3;border-width: 0px;border-radius: 3px; }QPushButton:hover {…

我的QT Creator学习笔记(十九)——Qt样式表

参考文献&#xff1a;《Qt Creator 快速入门》第三版 霍亚飞编著 Qt样式表的术语和语法规则与HTML CSS基本相同。 一、样式规则 样式表包含了一系列的样式规则&#xff0c;每个样式规则由选择器&#xff08;Sekector)和声明&#xff08;declaration)组成。选择器制定了受规则…

PyQt(Python+Qt)学习随笔:Qt Designer中部件的样式表styleSheet属性

styleSheet属性是定义部件外观的属性样式表,在Qt中styleSheet样式表是类似于html的css样式一样的方法,只是时专门为Qt中的部件开发的。styleSheet的定义语法也是类似CSS,并且是跨平台支持的。 由于每个部件都可以定义自己的样式,也可以通过QApplication.setStyleSheet()…

【Qt开发】StyleSheet使用总结

概述 转眼七年过去了&#xff0c;我是一个彻底拥抱过MFC的人&#xff0c;记得老大的一个需求要把按钮做成圆角&#xff0c;并添加背景颜色&#xff0c;做前端html的可能认为很简单&#xff0c;然而放到MFC上那可真的是很...很麻烦的&#xff0c;自定义类继承Button &#xff0…

smartupload.jar实现文件上传,下载(附下载链接)

JavaWeb使用smartupload.jar实现文件上传&#xff0c;下载 1、先将smartupload.jar 导入到项目中 jar包下载地址&#xff1a; 点击去下载 2、上传页面的准备 注:(1)form标签中要添加enctype属性 (2)提交方式必须是post <html> <head><title>文件上传&…

利用SmartUpload组件实现文件上传与下载

创建Web项目SmartUpload 在WEB-INF目录里创建lib子目录&#xff0c;加入jspSmartUpload.jar 在web目录里创建上传子目录upload&#xff0c;用于存放上传文件 在web目录修改首页文件index.html 在web目录创建上传页面upload.html 在web目录里创建处理上传的页面do_upload.j…

smartupload下载

首先&#xff0c;很不幸的&#xff0c;今天是周一&#xff0c;所以今天要上课&#xff0c;但是很幸运的&#xff0c;早上没课&#xff0c;但是又不幸的早起习惯了&#xff0c;所以我说了很多废话来消磨时间&#xff0c; 上篇说了怎么用上smartupload来上传文件到服务器端&…

使用smartupload进行文件上传

关于文件上传的代码&#xff0c;只有百度一下都能找到一大堆。但是可惜大多数都使用的是jsp来处理上传&#xff0c;而使用servlet处理文件上传的文章是比较少的。但是不管是jsp还是servlet处理都会跳转但是这样就很难看了。这就要使用到js内嵌的框架了。这样页面看起来就不会跳…

SmartUpload组件实现文件上传

调试好几天的程序&#xff0c;原来是软件版本的原因&#xff0c;我靠&#xff0c;能说脏话吗&#xff1f;好吧&#xff0c;当然这个过程虽然痛苦&#xff0c;但程序猿要学会享受同bug战斗的乐趣。 实现过程&#xff1a; &#xff11;、将下载好的smartupload.jar文件导入项目l…

SmartUpload使用和简介

原文地址为&#xff1a; SmartUpload使用和简介 用以下代码生成文件名即可 1 package info.haowei.util; 2 3 import java.text.SimpleDateFormat; 4 import java.util.Date; 5 import java.util.Random; 6 7 public class IPTimeStamp { 8 9 10 private SimpleDat…