Qt中QSS的简单使用

最新推荐文章于 2024-07-03 21:02:08 发布
最新推荐文章于 2024-07-03 21:02:08 发布
阅读量1w 收藏 90
点赞数 12
分类专栏： Qt
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/blqzj214817/article/details/108752675
版权

样式表的组成

样式表由两大元素组成：选择器和声明。选择器实际上可以理解为对象，声明则是对该对象的属性的设置。

样式表的使用

方法一：在代码中调用setStyleSheet()来设置样式；
方法二：通过加载qss文件来设置样式。

样式表的简单使用介绍

setStyleSheet()的简单应用：
【1】通过QApplication的对象调用；
（1）创建QSS文件——myqss.qss;
创建文本文件，存入源文件所在的同级目录下，修改其文件名为myqss.qss。
（2）用QtCreate打开该工程，在项目名上右键点击添加新文件，选择Qt资源文件，按照提示创建资源文件；
（3）在创建的资源文件上右键选择添加前缀，之后添加该项目所用到的资源文件，即图片，添加之后保存；
（4）在main.cpp文件中添加如下代码。

#include <QApplication>
#include <QFile>
int main(int argc,char *argv[])
{
	QApplication app(argc,argv);
	QFile file(".\myqss.qss");/*QSS文件所在的路径*/
	file.open(QIODevice::ReadOnly);
	if(file.isOpen())
	{
		QString strFile = file.readAll();
		app.setStyleSheet(strFile);
		file.close();/*记得关闭QSS文件*/
	}
	return app.exec();
}

备注：
此方法通过在主函数中读取QSS文件，来设置界面的样式，可以将整个项目中各界面对应的样式设置都都在一个QSS文件下

qss文件的大体介绍

  1. 只有一个界面的QSS文件
    内容形式：控件类名#objectName{ … }
    如只有一个界面，界面上有一个QPushButton控件，在其对应的qss文件中可以编写其内容为下：
/*创建应用程序，基类为QWidget,在其ui文件中将QWidget的objectName更改为WidgetPainter，拖入控件QPushButton将其ObjectName更改为pushButtonPainter，现在qss文件中设置按钮的样式，按钮未被点击的状态和按钮被点击的状态*/
/*画笔未被点击*/
QWidget#WidgetPainter>QPushButton#pushButtonPainter{
	background-color:transparent;
	image:url(:/image/painterUnchecked.png);
}

/*画笔被点击*/
QWidget#WidgetPainter>QPushButton#pushButtonPainter:pressed{
	background-color:transparent;
	image:url(:/image/painterChecked.png);
}

因为整个应用程序只有一个界面，可以将整个项目中所有控件的样式设置都写到一个qss文件中，在main函数中加载qss文件，给界面设置样式。
2. 多界面的QSS文件
可以将每一个界面写一个qss文件，然后在各界面对应的类中的构造函数里加载qss文件；也可以将所有界面的样式设置写到一个qss文件中，在main函数中加载qss文件。

/*将信号源名字界面与系统设置界面的样式设置写道同一个qss文件中，对于部件间关系的归属必须锊清，否则会达不到预想的界面效果，下面是在一个QWidget(objectName为SignalSource)上拖入一个QWidget(objectName为widget_title)，再在objectName为widget_title的QWidget上拖入标签QLabel和按钮QPushButton,即QLabel和QPushButton为widget_title的直接子部件，widget_title为SignalSource的直接子部件，之间子部件之间使用>,控件类与控件的名称之间使用#，*/
/***************************信号源名字子页面**************/
/*页面的背景*/
QWidget#SignalSource{
	background-color:#FF2D3274;
}

/*页面标题栏*/
QWidget#SignalSource>QWidget#widget_title{
	background-color:#FF262B63;
}

/*信号源的名字*/
QWidget#widget_title>QLabel#label_name{
    color: rgb(255, 255, 255);
	font-size:16px;
	font-family:Microsoft YaHei;
}

/*控制按钮*/
QWidget#widget_title>QPushButton#pushButton_control{
	background-color:transparent;
	image:url(:/new/prefix1/images/contrl.png);
	border-style:flat;
}


/*控制按钮被点击状态*/
QWidget#widget_title>QPushButton#pushButton_control:checked{
	image:url(:/new/prefix1/images/finishControl.png);
}


/*上屏按钮*/
QWidget#widget_title>QPushButton#pushButton_upscr{
	background-color:transparent;
	image:url(:/new/prefix1/images/upsrc.png);
	border-style:flat;
}

/*上屏按钮被点击状态*/
QWidget#widget_title>QPushButton#pushButton_upscr:checked{
	image:url(:/new/prefix1/images/downscr.png);
}


/*设置按钮*/
QWidget#widget_title>QPushButton#pushButton_set{	
	background-color:transparent;
	image:url(:/new/prefix1/images/seting.png);
	border-style:flat;
}

/*设置按钮鼠标按下状态*/
QWidget#widget_title>QPushButton#pushButton_set:checked{
	image:url(:/new/prefix1/images/seting2.png);
}


/*全屏按钮*/
QWidget#widget_title>QPushButton#pushButton_fullscr{
	background-color:transparent;
	image:url(:/new/prefix1/images/fullscr.png);
	border-style:flat;
}

/*全屏按钮鼠标按下状态*/
QWidget#widget_title>QPushButton#pushButton_fullscr:checked{
	image:url(:/new/prefix1/images/fullsrc2.png);
}


/*******************系统设置****************/
/*整体窗口背景#FF2E3274*/
QDialog#SystemSet{
	background-color:#FF2E3274;	
/*	box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.1);*/
	border-radius: 5px 5px 5px 5px;
}

/*窗体头背景*/
QDialog#SystemSet>QWidget#widget_title{
	background-color:#FF262B63;
}

/*系统设置标题*/
QWidget#widget_title>QLabel#label_title{
	color:#FFFFFFFF;
	font-family:MicrosoftYaHei;
	font-size:16px;
}

/*系统设置图标*/
QWidget#widget_title>QLabel#label_sysSet{
	background-color:transparent;
	image:url(:/new/prefix1/images/sysset.png);
}

/*默认设置按钮*/
QWidget#widget_title>QPushButton#pushButton_defaultset{
	color:#FFFFFFFF;
	font-family:MicrosoftYaHei;
	font-size:16px;	
	background-color:#FF282C66;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	border-style:flat;
}

/*默认设置按钮被点击*/
QWidget#widget_title>QPushButton#pushButton_defaultset:pressed{
	color:#FFFFFFFF;
	background-color:#FF008AFF;
	font-family:MicrosoftYaHei;
	font-size:16px;
}

/*默认设置按钮旁边白线*/
QWidget#widget_title>QLabel#label1{
	background-color:#FFFFFF;	
	border-radius: 1px;	
	opacity: 0.5;
}

/*高级设置按钮*/
QWidget#widget_title>QPushButton#pushButton_advanceset{
	color:#FFFFFFFF;
	font-family:MicrosoftYaHei;
	font-size:16px;	
	background-color: #FF282C66;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	border-style:flat;
}

/*高级设置按钮被点击*/
QWidget#widget_title>QPushButton#pushButton_advanceset:pressed{
	color:#FFFFFFFF;
	background-color:#FF008AFF;
	font-family:MicrosoftYaHei;
	font-size:16px;
}

/*高级设置按钮旁边白线*/
QWidget#widget_title>QLabel#label2{
	background-color:#FFFFFF;	
	border-radius: 1px;	
	opacity: 0.5;
}

/*ip设置按钮*/
QWidget#widget_title>QPushButton#pushButton_ipset{
	color:#FFFFFFFF;
	font-family:MicrosoftYaHei;
	font-size:16px;	
	background-color: #FF282C66;	
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	border-style:flat;
}

/*ip设置按钮被点击*/
QWidget#widget_title>QPushButton#pushButton_ipset:pressed{
	color:#FFFFFFFF;
	background-color:#FF008AFF;
	font-family:MicrosoftYaHei;
	font-size:16px;
}

QWidget>QPushButton#pushButton_close{
	background-color:transparent;
	image:url(:/new/prefix1/images/close.png);
}

以上是对QSS使用过程中的一些简单的总结。涉及更多的内容还需自己挖掘，个人理解在多界面共用一个qss文件时，部件之间关系十分重要。
在使用图片作为整个界面的背景图片时，需要在QWidget中拖入一个QWidget，在拖入的QWidget中设置背景透明，背景图片，并且需要将整个界面的QWidget设置为透明，无标题，否则达不到想要的效果
如下面的qss文件中所写：

/*提示窗口的整体需要加载一张图片，先在QDialog中拖入控件QWidget(objectName为widget)，在程序设置QDialog的没有标题和背景透明，在qss文件中编写widget背景透明，加载背景图片*/
/****************通知提示窗口*************/
/*界面的整体背景rgba(0,255,255,255)*/
QDialog#InformDialog>QWidget#widget{	
	background-color:transparent;
	background-image:url(:/new/prefix1/images/informbackground.png);
}

image,backgroun-image,border-image的区别，image的不会改变图片的大小，不会拉伸和压缩图片，backgroun-image一般用于整个控件的背景图片，无法随部件的大小自动缩放，border-image为可以随部件的大小自动缩放

子部件的样式设置

控件的子控件设置样式简单的贴一些自己之前做过的，更多还需自己学习。

/*QComboBox控件的子部件的简单设置下拉的界面，下拉界面每一项，下拉按钮的样式，QSpinBox,QCheckBox,QRadioButton子部件的设置*/
/*下拉按钮*/
QWidget#systemdefaltSet>QComboBox{	
	background-color: #121650;
	border-radius: 6px;
	font-size: 14px;
	font-family: Microsoft YaHei;
	font-weight: 400;
	color: #FFFFFF;
}

/*下拉按钮*/
QWidget#systemdefaltSet>QComboBox::down-arrow{	
	image:url(:/new/prefix1/image/comboxDown.png);
}

/*下拉按钮隐藏边框*/
QWidget#systemdefaltSet>QComboBox::drop-down{	
	border:none;
	top:4px;
	left:-15px;
}

/*下拉窗体*/
QWidget#systemdefaltSet>QComboBox QAbstractItemView{	
	background-color:#55557f;
	outline: 1px solid #ffaa7f;   /* 选定项的虚框 */
	selection-background-color:#121650;
	color:#FFFFFF;
}

/*下拉窗体每一项*/
QWidget#systemdefaltSet>QComboBox QAbstractItemView::item{	
	height:50px;
}
/*行列按钮最初形态#spinBoxrow*/
advanceSet>QSpinBox{		
	background-color: #12164F;
	border-radius: 6px;	
	font-size: 14px;
	font-family: Microsoft YaHei;
	font-weight: 400;
	color: #FFFFFF;
}

/*行列按钮被点击之后整体轮廓设置*/
advanceSet>QSpinBox:pressed{			
	background-color: #121650;
	border: 1px solid #00FFFF;
	border-radius: 6px;
}

/*行列按钮上箭头没有被点击的状态:unchecked*/
advanceSet>QSpinBox::up-button{	
	image:url(:/new/prefix1/image/spinupbtnUnchecked.png);
}

/*行列按钮下箭头没有被点击的状态:unchecked*/
advanceSet>QSpinBox::down-button{	
	image:url(:/new/prefix1/image/spindownbtnUnchecked.png);
}

/*行列按钮上箭头被点击的状态*/
advanceSet>QSpinBox::up-button:pressed{	
	image:url(:/new/prefix1/image/spinupbtnChecked.png);	
	border:none;
}

/*行列按钮下箭头被点击的状态*/
advanceSet>QSpinBox::down-button:pressed{	
	image:url(:/new/prefix1/image/spindownbtnChecked.png);	
	border:none;
}

/*此界面上所有的单选按钮最初状态*/
advanceSet>QRadioButton{
	font-size: 14px;
	font-family: Microsoft YaHei;
	font-weight: 400;
	color: #FFFFFF;
}

/*此界面上所有的单选按钮的子部件的最初状态（未点击状态）*/
advanceSet>QRadioButton::indicator{
	image:url(:/new/prefix1/image/radioUnchecked.png);
}

/*此界面上所有的单选按钮的子部件的被点击后的状态（点击状态）*/
advanceSet>QRadioButton::indicator:checked{
	image:url(:/new/prefix1/image/radioChecked.png);
}

/*此界面上所有的复选框最初时的状态*/
advanceSet>QCheckBox{
	font-size: 14px;
	font-family: Microsoft YaHei;
	font-weight: 400;
	color: #FFFFFF;
}

/*此界面上所有的复选框子部件未被点击时的状态*/
advanceSet>QCheckBox::indicator{
	background-color:transparent;
	image:url(:/new/prefix1/image/checkbtnUnchecked.png);
}

/*此界面上所有的复选框子部件被点击时的状态*/
advanceSet>QCheckBox::indicator:checked{
	image:url(:/new/prefix1/image/checkbtnChecked.png);
}
多个相同类型的控件的样式相同

若同一类型的控件的样式要求一致，可以一起设置。

  1. 界面上有多个相同类型的控件，但是有几个控件的样式要求一致，可以采取如下设置；
/*界面中还有其它的QPushButton，但是有两个QPushButton的样式设置要求一致，可以一起设置*/
/*确定按钮,取消按钮*/
QWidget#widget>QPushButton#pushButton_confirm,QPushButton#pushButton_cancel{	
	font-size: 14px;
	font-family: Microsoft YaHei;
	font-weight: 400;
	color: #FFFFFF;
	background-color:#FF080C3E;	
	border: 1px solid #FFFFFF;
	border-radius: 6px;
}

/*确定按钮,取消按钮被点击状态*/
QWidget#widget>QPushButton#pushButton_confirm:pressed,QPushButton#pushButton_cancel:pressed{
	font-size: 14px;
	font-family: Microsoft YaHei;
	font-weight: 400;
	color: #000438;	
	background-color: #00FFFF;
	opacity: 0.9;
	border-radius: 6px;
}

2.若界面上所有同一类型的控件的样式都要求设置一致，可以不用指明控件名称，直接设置。

/*界面上所有的QPushButton控件的样式一致*/
InformDialog>QPushButton{
	color:#FFFFFF;
	background-color:#FF2D3274;
	border: 1px solid #FFFFFF;
	border-radius: 6px;
}

/*取消按钮被点击状态*/
InformDialog>QPushButton:pressed{
	background-color: #008AFF;
	border-radius: 6px;
}
肩上风骋
关注
  • 12
    点赞
  • 踩
  • 90
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
专栏目录
QT中QSS设置的三种方法
热土程序园，利他愉己~
02-27 2629
什么是QSS QSS称为Qt Style Sheets也就是Qt样式表，它可以应用于Qt部件（Widgets）和绘制元素，以定制和美化用户界面。QSS大量参考了CSS的内容，只不过QSS的功能比CSS要弱很多， 体现在选择器少，可以使用的QSS属性也要少很多，而且并不是所有的属性都可以用在Qt的所有控件上。 二.QSS三种设置方法 方法一： 1.QSS文件示例 方法二： 1.QT程序中直接设置QSS 方法三： 1.在控件界面中直接设置qss
QT中QSS主题生成器
01-18
在QT开发中，使用QSS有以下几个关键知识点： 1. **QSS语法**：QSS语法与CSS非常相似，但增加了对Qt控件特性的支持。例如，你可以通过`QPushButton { color: red; }`来改变所有按钮的文本颜色。 2. **选择器**：...
QT QSS简单使用
haoyu12123的博客
08-16 3058
之前完成的QT程序完成逻辑控制后，界面全都使用图片填充的方式来做美化，但是使用到的组件看上去很丑，因此上网简单学习之后做总结如下：（之前也未学习过CSS等知识属于纯小白，如有错误，不吝赐教）。...
Qt开发 | qss介绍及控件应用 | qss加载方式 | 控件提升 | 鼠标位置与控件位置 | 搜索编辑框 | tab在左文本水平的tabWidget
最新发布
zwcslj的博客
07-03 1250
Qt Style Sheets ，简写是QSS，Qt样式表，用于修改控件外观，美化界面。它类似于前端的CSS（Cascading Style Sheets）但专门用于Qt应用程序。QSS允许开发者通过样式表来控制窗口部件的外观和感觉，而无需修改应用程序的源代码。
QT中Qss的使用
Vivi的城
12-24 1409
前言：   关于Qss的介绍，大家可以查阅其他博主的文章，这里主要讲解使用方法，这个使用方法对初学者比较友好，之后技术提高后，可以进行改进。 效果图： 上面的这些图标都是按钮，进行了简单的样式设计，1号按钮是鼠标经过时候会改变状态，2号按钮是鼠标安歇按下时候改变状态 1）定义了一个设置qss的函数 void myWidget::set_qss(QWidget* uiName,QString qssPath) { QFile styleFIle(qssPath); styleFIle.ope
QT_qss文件简易使用教程
Lee1989
07-19 4168
与添加图片资源一样添加，后缀改为qss即可创建样式表文件。交个博友，技术分享交流联系作者Q群586025772。这里就是一个qss文件，修饰引用该文件的窗口。具体详细语法参考网络。
Qt关于qss文件的添加使用
qq_57049935的博客
01-31 1024
把ui设计得更加的养眼，肯定需要对控件的属性进行设置，qt中就是关于qss文件的使用。那么如何创建和添加qss文件呢。
Qt 的 Qss使用
nuoyigui9889的博客
07-16 577
上面的样式将会应用到 QPushButton、QLineEdit、QComboBox、QScrollBar 等控件上，并且可以看到各个控件的样式都是不一样的。Qss 支持不同的尺寸和单位来定义样式，包括像素（px）、绝对长度（cm、mm、in、pt、pc）、相对长度（em、ex、rem）、百分比（%）等，用于实现不同尺寸的控件效果。在 Qt 的 Qss 中，样式属性可以分为两类：控件属性和子控件属性，其中控件属性用于设置控件自身的样式，子控件属性用于设置控件的子控件的样式。
Qt之QSS使用与基本语法
百里杨的博客
05-03 1万+
一、QSS介绍 QSS是一种从CSS借鉴过来的机制，用来实现对控件外观的自定义。但是它比CSS功能要弱化一些，有一些属性和选择器，QSS并没有。 Qt中的各个控件可以使用QSS来实现界面的个性化定制、美化，使用起来也是特别方便的。 二、QSS使用与语法 我们接下来以一个简单地例子来，说明怎么使用qss修改界面外观。 1、举个栗子 设置QLineEdit控件背景色为黄色。 qApp->setS...
Qt6教程之三(2) QT使用qss
世界需要程序员，而我就是其中一员！
02-28 1269
本篇主要介绍Qt的QSS技术！
QT项目使用Qss的总结
houxian1103的博客
08-27 2583
QSS称为Qt Style Sheets也就是Qt样式表，它是Qt提供的一种用来自定义控件外观的机制。QSS大量参考了CSS的内容，只不过QSS的功能比CSS要弱很多，体现在选择器要少，可以使用的QSS属性也要少很多，并且并不是所有的属性都可以用在Qt的所有控件上。
Qt的Qss使用源码
12-24
你只需在QSS文件中使用`@import`语句，即可引入其他样式表。 此外，QSS还提供了对嵌入图片的支持，这在自定义按钮、图标等时非常有用。例如，为按钮设置一个图标： ```qss QPushButton { background-image: url(:...
Qt,Qss 实现简易计算器
05-31
\n\n本项目“Qt_Qss_实现简易计算器”旨在通过Qt框架和QSS技术，构建一个简单易用的计算器应用。下面将详细介绍如何利用Qt和QSS来实现这一目标。\n\n1. **Qt GUI组件**\n - **QLayout**: Qt中的布局管理器，如...
Qt使用QSS对界面进行美化
11-23
在本文中，我们将深入探讨如何使用Qt框架中的QSS（Qt StyleSheet）技术来美化应用程序的用户界面。QSS类似于Web开发中的CSS，它允许我们通过简单的文本格式定义UI元素的外观，实现类似网页样式的定制效果。让我们...
好用的QT-qss漂亮界面
10-25
在QT应用中，QSS的使用通常包括以下几个步骤： 1. **导入QSS**：在你的QT程序中，可以通过`setStyleSheet()`函数导入QSS文件，例如： ```cpp QFile styleSheet(":/styles/main.css"); if (styleSheet.open(QFile...
qt中QList使用removeAt()删除元素
热门推荐
肩上风骋的博客
04-08 1万+
提要 QList删除元素的时候需要特别注意一点，将元素删除后链表中元素的排列。删除一个元素后，后面的元素会补到被删元素的位置，这样在for循环中若删除元素后继续执行下标++，则会少遍历元素。下面看一个示例。 示例 下面是出错的代码，删除元素后执行了下标++。 //参数大概说明，仅说明，不涉及定义 QListReso m_listResolution;//保存每块屏的分辨率 stuBigScreen m_stuBigScrInfo;//保存大屏列表的信息 //每块屏的分辨率 typedef struct
qt使用样式表设置窗口widget无边框的情况下为圆角
肩上风骋的博客
08-20 1万+
提要 窗口widget是无法直接通过样式表设置为圆角的，需要在窗口QWidget中拖入控件QFrame，将QFrame设置的和窗口QWidget一样大小，将窗口QWidget中需要的控件拖入QFrame中。 示例 下面是一个提示工具的窗口。通过它简单的记录一下样式表怎么实现圆角窗口。 效果 没有很好的 剪裁，看其中的绿色窗口就行。 步骤 1.创建项目，打开ui文件，在ui文件中“排兵部阵”（在QWidget窗口上放置QFrame，在QFrame上放置自己需要的控件，这样就可以将QWidget设置为透明，设
使用gitlab初次上传代码
肩上风骋的博客
05-12 1万+
提要 项目开发中需要使用gitlab来管理代码，将自己开发的模块上传到gitlab,第一次使用这个代码管理仓库，记录一下。 方法 1.首先注册gitlab的账号。这个在百度上搜一下gitlab的官网，进去后首页就是注册及登陆页面，没有账号的先注册，不做详细说明。 2.有自己的账号后登录，进入gitlab。 3.进入自己的团队中，创建一个仓库。 点击上面的new projects,进入创建仓库界面，如下图所示 查看上图标出的顺序，在1处输入项目的名称，在2处输入项目的描述，3处选择新仓库的属性，私有的，内
qt 中 qss背景图片
05-29
在Qt中，QSS（Qt Style Sheet）是一种用于定义应用程序样式的样式表语言。QSS支持设置背景图片，可以使用以下语法： ``` background-image: url("image.png"); ``` 其中，`image.png` 是背景图片的路径。可以使用相对路径或绝对路径来指定路径。 另外，QSS还支持其他背景相关的属性，如`background-color`（背景颜色）、`background-repeat`（背景图片重复方式）、`background-position`（背景图片位置）、`background-origin`（背景图片原点）等。 如果您需要设置QWidget或其子类的背景图片，可以在QWidget或其子类的构造函数中调用`setStyleSheet()`函数来设置QSS。例如： ``` QWidget *widget = new QWidget; widget->setStyleSheet("background-image: url('image.png')"); ```
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

肩上风骋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值