【QT】QSS使用总结
文章目录
- 主要流程:
- 导入QSS文件:
- 1. 添加Qt Resource File文件,输入名称
- 2. 在工程文件目录下先建一个".txt"文件,重新命名后缀为".qss"
- 3. 右键添加现有文件qss.qss
- 4. 完成添加
- 5. 将 qss样式应用到整个工程
- QSS编写语法
- 常见问题
- 1. 继承于Widget的主界面背景图无法显示
- 2. 大多数无效问题
- 3. 几个简单的例子
- QPushButton:
- QLineEdit:
- QListWidget
- QListView
- QProgressBar
- QScrollBar
- QTableView
- QComboBox
主要流程:
导入QSS文件:
1. 添加Qt Resource File文件,输入名称
2. 在工程文件目录下先建一个".txt"文件,重新命名后缀为".qss"
3. 右键添加现有文件qss.qss
4. 完成添加
5. 将 qss样式应用到整个工程
QFile file(":/qss/mainQss.qss");
file.open(QIODevice::ReadOnly);
setStyleSheet(file.readAll());
QSS编写语法
常见问题
1. 继承于Widget的主界面背景图无法显示
需要添加一行代码
setAttribute(Qt::WA_StyledBackground);
再在qss文件中添加以下代码即可,#后跟随的是你的widget名称,替换成自己的即可
QWidget#widget{background-image: url(:/img/img/darkbule.png);
}
2. 大多数无效问题
由于Qss文件没有自动查错的功能,所以常常是输入的句式有问题,导致的无效。
比如以下代码是无效的:
#前后不能有空格:
QWidget # widget{background-image: url(:/img/img/darkbule.png);
}
所以这个时候去官方文档查看正确的语法即可。
官方文档:https://doc.qt.io/qt-5/stylesheet-reference.html
3. 几个简单的例子
QPushButton:
/*按钮正常态*/
QPushButton#btn_load,#btn_configure{color: rgb(255, 255, 255);font: 10pt "黑体";border: none;background-color: transparent;border-image: url(:/images/images/按钮.png);
}/*按钮悬浮态*/
QPushButton#btn_load:hover,#btn_configure:hover{color: rgb(255, 255, 255);font: 10pt "黑体";border: none;background-color: transparent;border-image: url(:/images/images/按钮1.png);
}/*按钮禁用态*/
QPushButton#btn_load:disabled{color: rgb(145, 145, 145);font: 10pt "黑体";border: none;background-color: transparent;border-image: url(:/images/images/按钮4.png);
}/*按钮点击态*/
QPushButton:pressed{background-color:rgba(0, 0, 127, 50);
}/*按钮已被选态*/
QPushButton:checked{background:rgba(0, 170, 255, 50);
}
QLineEdit:
/*输入框:常态*/
QLineEdit {border: 1px solid #A0A0A0; /* 边框宽度为1px,颜色为#A0A0A0 */border-radius: 3px; /* 边框圆角 */padding-left: 5px; /* 文本距离左边界有5px */background-color: #F2F2F2; /* 背景颜色 */color: #1d92dc; /* 文本颜色 */selection-background-color: #A0A0A0; /* 选中文本的背景颜色 */selection-color: #F2F2F2; /* 选中文本的颜色 */font-family: "Microsoft YaHei"; /* 文本字体族 */font-size: 10pt; /* 文本字体大小 */
}/* 鼠标悬浮在QLineEdit时的状态 */
QLineEdit:hover {border: 1px solid #298DFF;border-radius: 3px;background-color: #F2F2F2;color: #298DFF;selection-background-color: #298DFF;selection-color: #F2F2F2;
}/* QLineEdit在禁用时的状态 */
QLineEdit:disabled {border: 1px solid #CDCDCD;background-color: #CDCDCD;color: #B4B4B4;
}
QListWidget
QListWidget#listWidget{border: none;background-color: transparent;border-width: 1px 1px 1px 1px;border-style: solid;border-color: rgb(18, 76, 224);
}/*子控件item被选态*/
QListWidget::item:selected{ background: rgba(38, 174, 227, 50);
}
QListView
QListView::item{border: 1px solid #1d92dc;
}QListView::item::hover{background: rgba(29, 164, 220, 50);
}QListView::item:selected:!active {background: rgba(29, 164, 220, 50);
}QListView::item:selected:active {background: rgba(29, 164, 220, 100);
}
QProgressBar
/*进度条*/
QProgressBar{color: rgb(255, 255, 255);font: 10pt "黑体";border:none; /*无边框*/background:rgb(54,54,54);border-radius:5px;text-align:center; /*文本的位置*/
}/*进度条:运行态*/
QProgressBar::chunk
{background-color:rgb(38, 174, 227);border-radius:4px;background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,stop: 0 #6bbaf3, stop: 1.0 #0696ff); /* 进度条块渐变背景颜色 */
}
QScrollBar
/*竖直滚动条*/
QScrollBar:vertical{/*background: white;*/width: 8px;padding-top:18px;padding-bottom:18px;border-image: url(:/images/images/scroll_subpage.png) 0 4 0 4 repeat repeat;
}
/*竖直滚动条子控件:把手*/
QScrollBar::handle:vertical{min-height: 40px;border-width: 0px 4px 0px 4px;border-image: url(:/images/images/scroll_handle.png) 0 4 0 4 repeat repeat;
}
/*竖直滚动条子控件:滚动条上面和下面区域*/
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical{width: 8px;border-width: 0px 4px 0px 4px;border-image: url(:/images/images/scroll_subpage.png) 0 4 0 4 repeat repeat;
}
QTableView
QTableView{color: rgb(225, 225, 255); /*字体颜色*/border: 1px solid #1d92dc; /*边框颜色*/gridline-color:#1d92dc; /*grid线颜色*/background-color: transparent; /*背景颜色*/text-align:center; /*对齐方式*/
}/*TableView表头*/
QHeaderView::section{background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 rgba(5, 88, 164, 255), stop:1 rgba(5, 54, 112, 255));color: rgb(29, 213, 220);padding-left: 4px;border: 1px solid #1d92dc;min-height: 30px;
}
QComboBox
/*下拉框*/
QComboBox{font: 12pt "黑体";border-color: white;color: #15618c;
}/*当下拉框打开时 */
QComboBox QAbstractItemView {font: 12pt "黑体";color: #15618c;
}QComboBox QAbstractItemView::item {height: 20px;
}
【QT】QSS使用总结相关推荐
- Qt qss 九宫格
Qt qss 九宫格 QPushButton{ border-image:url(:/button.png) 10 20 30 40; border-top: 10px transpa ...
- QT:QSS自定义QLineEdit实例
QT:QSS自定义QLineEdit实例 QLineEdit 的框架是使用Box Model.设计的. 要创建带圆角的线编辑,我们可以设置: QLineEdit {border: 2px solid ...
- qt qss设置字体大小_Qt编写自定义控件70-扁平化flatui
一.前言 对于现在做前端开发人员来说,FlatUI肯定不陌生,最近几年扁平化的设计越来越流行,大概由于现在PC端和移动端的设备的分辨率越来越高,扁平化反而看起来更让人愉悦,而通过渐变色产生的质感色彩反 ...
- Qt QSS之QSlider滑动条美化
首先什么是qss呢?QSS称为Qt Style Sheets也就是Qt样式表,它是Qt提供的一种用来自定义控件外观的机制.QSS大量copy了CSS的功能,只不过QSS的可以看作是CSS简化版,要弱很 ...
- Qt QSS QCheckBox和QRadioButton
导读 单选按钮(QRadioButton)和复选框(QCheckBox)是界面设计中的重要元素.单选按钮只允许用户在一组选项中选择一个,且当其中一个被选中的时候,按钮组中的其他单选按钮自动取消.复选框 ...
- Qt QSS基础知识学习
1.QSS介绍 QSS是Qt程序界面中用来设置控件的背景图片.大小.字体颜色.字体类型.按钮状态变化等属性,用于美化UI界面.实现界面和程序的分离,快速切换皮肤. QSS最大的优点就是简单便捷,可以快 ...
- QT QSS简单使用
之前完成的QT程序完成逻辑控制后,界面全都使用图片填充的方式来做美化,但是使用到的组件看上去很丑,因此上网简单学习之后做总结如下:(之前也未学习过CSS等知识属于纯小白,如有错误,不吝赐教). 1.新 ...
- Qt QSS基本属性设置
QSS基本属性设置 Qss的强大在于组合功能的强大,这里只是简单介绍基本功能,将简单功能组合起来才能实现好看的效果. Qss背景属性(Background) 属性 描述 CSS background ...
- Qt QSS界面美化
一.功能介绍 1.根据刘典武大佬和网上查询的资料,进行更改 https://gitee.com/feiyangqingyun/QWidgetDemo#https://gitee.com/feiyang ...
- 6、Qt QSS界面美化
一.功能介绍 1.根据刘典武大佬和网上查询的资料,进行更改 https://gitee.com/feiyangqingyun/QWidgetDemo#https://gitee.com/feiyang ...
最新文章
- docker搭建常见组件
- GDCM:无效的DICOM文件的测试程序
- C语言递归算法十进制数转换为八进制(附完整源码)
- 通过Serverless技术降低微服务应用资源成本
- 【机器视觉】 dev_map_prog算子
- php 计算前几天,php计算几分钟前、几小时前、几天前的几个函数、类分享
- mysql 行级锁 索引_mysql 行级锁 索引唯一值
- iic总线从机仲裁_总线-IIC-SPI
- c#:无限极树形结构
- java新增mysql时 中文出现_Java项目往数据库中插入数据,出现中文乱码
- acs510使用技巧_ABBACS510系列变频器通用接线图和参数表【借鉴实操】
- C语言 | 延时函数(Delay)
- win7自带计算机,win7系统自带的计算器不见了的解决方法
- aliddns ipv6_AliDDNS v2.0.0.1 - 阿里云DNS动态解析Windows客户端 支持IPv6 微信推送
- 虚拟化、文件系统、查找文件
- animation动画不生效_css animation不动怎么办
- iOS 7、iOS 8屏幕适配
- WebDay14 Linux高级+Nginx
- python 使用input函数输入两个数字,比较两个数字的大小,并输出较大的数
- C/S 开发框架 ----- 广州本地
热门文章
- 《量子保密通信技术白皮书》
- IntelliJ IDEA导包快捷键
- 软件测试基础学习笔记
- 697小说源码PC端+手机端+采集工具(源码带3000本小说的数据)
- win8怎么被远程计算机关闭,Win8系统局域网如何远程关机?Win8系统局域网远程关机的方法...
- HTML 实现扫雷游戏
- 算法笔记(23)网格搜索及Python代码实现
- 数据可视化分析软件开发_大数据系统建设解决方案
- 我的世界颜色代码服务器不显示,我的世界颜色代码符号大全,让你构造一个五彩斑斓的世界...
- hive窗口函数最全总结