QSS样式使用心得以及基础-程序员宅基地

技术标签: qss  css  Qt  qt  

qss使用心得

a. 多些使用负值和方向的结合解决问题;例如底部有白色线border-bottom  margin,字体上移padding-top:-2px

QTabBar::tab:selected 
{
  border-image: url(:/Style/img/QLabel/tab.png);
}
QTabBar::tab:!selected 
{
  margin-top:4px solid;
  border-bottom:-10px solid rgb(255,255,255);
  margin-bottom:-2px ;
  background-color: rgb(222, 222, 222);
  color: #1580B4;
  padding-top:-2px;
}
QTabBar::tab
{
  font:13pt "PingFang SC Bold" ; 
  width:132px;
  height:47px;
  margin-right:4px;
  background-color: rgb(255, 255, 255);
  border-top-left-radius:5px;
  border-top-right-radius:5px;
  margin-bottom:0px;
}
QTabWidget:pane{
  border:solid 1px rbg(214,214,214);
  top:-1px;
}

QProgressBar样式

a. 样式设置透明,直接使用单词transparent;

QProgressBar
{
  border: none;
  color: white;
  text-align: center;
  background: transparent; /*设置背景透明*/
}
QProgressBar::chunk 
{
  border: none;
  background-color: rgb(255,255,255);
}
/*加个边框*/
QFrame#frame_value
{
  border:1px solid #ffffff;
  border-radius: 2px;
  background-color:transparent;
}

QSS使用

QSS类似于CSS可以用于设置控件样式,由于QT style是模拟CSS的布局结构,因此其满足CSS的盒子模型可以统一UI上同类型的控件,不用一个个去设置样式。。基本用法如下:

  1. QSS文件的创建

(1)建立文本文件,写入样式表内容,更改文件后缀名为qss;

(2)在工程中新建资源文件*.qrc,将qss文件加入资源文件qrc中,此处注意prefix最好为"/",否则在调用qss文件时会找不到文件;

(3)通过传入路径\文件名的方式创建一个QFile对象,以readonly的方式打开,然后readAll,最后qApp->setStyleSheet就可以使qss生效。

2.QSS的使用

使用qss可将功能与界面的设计分离开,方便UI设计,也可以制作更多更美的界面。

在代码中调用qss文件:(可以在构造函数中设置)

/    
QFile styleSheet(":/qss/myStyle.qss");
if (!styleSheet.open(QIODevice::ReadOnly))
{
    qWarning("Can't open the style sheet file.");
    return;
}
qApp->setStyleSheet(styleSheet.readAll());
styleSheet.close();

如何获取Qss的帮助?

在Qt帮助文档中搜索关键字:Style Sheet

控件UI设计

添加边框颜色

图片

父窗体设置样式不影响子控件

  1. 如果是在Creator中设置,可在stylesheet中加上”#XXX“,XXX是类名;例如 “#myGroupBox{color:red}”,那么group的背景色变成红色的!

  2. 在代码中设置同样如此,setStyleSheet (“#myGroupBox{color:red}” ); 一定要注意:myGroupBox是objectName,不然样式表中识别不了!

widget控件不能添加背景图片。

1. 下拉框 QComboBox :

a. 点击箭头向上,QComboBox::drop-down:checked{}

b. 下拉列表:QAbstractItemView

c. 每一项:QAbstractItemView::item{height: 25px;}

2. 复选框和单选框:

QRadioButton::indicator::checked, image使用。

3. QRadioButton

a. 去除选中的圆圈:

QRadioButton::indicator::unchecked{

border:none;

}

4. QSS学习之Subcontrol(很详细)

5. 官方样式表:

Qt Style Sheets Examples

6. 给控件加边框:

border: 1px solid rgb(210,210,210);

7. 界面开发工具:

picpick、qss三件套

8. no-repeat center的基本用法介绍

链接

a. 在border 和 background 设置背景图的时候可以使用,no-repeat是该图形不重复,就会出现一个,然后center就只会出现一次【background不是background-image】

b. 在默认情况下是repeat(平铺)如下

图片

d. no-repeat center如下:

图片

官方样式文档:

* **Qt Style Sheets**

按钮操作相关

Button:hover{}//按钮获取鼠标焦点

Button:pressed{}//按钮压下

Button:disabled{}//按钮被禁止,按钮无效

表格表头属性和滚动条属性

QHeaderView {} 不能单独设置某个类型的table的表头,因为表头不属于tablewidget里面的内容。一个table有四部分组成:item、horizontalHeader,verticalHeader,cornerBottonEnabled
QHeaderView::section{} 选中
QScrollBar:horizontal
QScrollBar:vertical
分水平和垂直。一个没有height,另外一个没有width属性
QScrollBar 不分。都适应。

border-image 和 background-image

    * border可以覆盖控件,并且让按钮的突起不会显示

对于一个widget里面的所有控件的样式设置,

例如widget名字:wg1

QWidget#wg1 QPushButton{}//改变wg1所有的button

QWidget#wg1 *{} //所有控件

选择器

* 任意窗口的部件
QDial 给定类的实例,包括子类
.QDial 给定类的实例,不包括子类
QDial#ageDial 给定对象名称的窗口部件
QFrame > QDial 给定窗口部件的直接子窗体部件
QFrame QDial 给定窗体部件的子孙窗体部件
QPushButton[enable=“false”] 属性选择器,配合bt->style()->polish(bt);来一起使用。可以动态的改变样式。
需要设置enable属性,setProperty()和property()

Qt样式表中常见的子控件列表

::branch QTreeView的分支指示器
::chunk QProgressBar的进度显示块
::close-button QDockWidget或者QTabBar页面的关闭按钮
::down-arrow ComboBox、QHeaderView(排序指示器)、QScrollBar或者QSpinBox的下拉箭头
::down-button QScrollBar或者QSpinBox的向下按钮
::drop-down ComboBox的下拉按钮
::float-button QDockWidget的浮动按钮
::groove QSlider的凹槽
::indicator QAbstractItemView、QCheckBox、QRadioButon、可勾选的QMenu菜单项、或者可勾选的QGroupBox的指示器
::handle QScrollBar、QSplitter或者QSlider的滑块
::icon QAbstractItemView或者QMenu的图标
::item QAbstractItemView、QMenuBar、QMenu或者QStatusBar的一个项
::left-arrow QScrollBar的向左箭头
::menu-arrow 具有下拉菜单的QToolButton的下拉箭头
::menu-button QToolButton的菜单按钮
::menu-indicator QPushButton的菜单指示器
::right-arrow QMenu或者QScrollBar的右侧箭头
::pane QTabwidget的面板
::scroller QMenu或者QTabBar的卷轴
::section QHeaderView的分段
::separator QMenu或者QMainWindow的分割器
::tab QTabBar或QToolBox的分页
::tab-bar QTableWidget的分页条,这个子控件只用于控制QTabBar在QTabWidget中的位置,定义分页的样式使用::tab子控件
::text QAbstracItemView的文字
::title QGroupBox或者QDockWidget的标题
::up-arrow QHeaderView(排序指示器),QScrollBar或者QSpinBox的向上箭头
::up-button QSpinBox的向上按钮

伪状态

:active 当组件处于一个活动的窗体时,此状态为真
:adjoins-item QTreeView::branch与一个条目相邻时,此状态为真。
:alternate 当QAbstractItem的alternatingRowColors()属性为true时,绘制交替的行时此状态为真
:bottom 组件处于底部,如QTabBar的表头位于底部
:checked 组件被勾选,如QAbstractButton的checked属性为true
:closable 组件可以被关闭时候,为true
:closed 条目处于关闭状态时,true
:default 条目是缺省的,如一个缺省的QPushButton按钮
:disabled 条目被禁用
:editable QComboBox是可编辑的
:edit-focus 条目有编辑焦点
:enabled 条目被使能
:exclusive 条目是一个排他性组的一部分,如一个排他性的QActionGroup的一个菜单项
:first 第一项,如QTabBar中的第一个项
:flat 条目是flat的,设置flat属性为true
:focus 条目具有焦点
:has-chlidren 条目有子条目,如QTreeView的一个节点具有子节点
:horizontal 条目具有水平方向
:hover 鼠标移动到条目上方时
:last 最后项,和first相对
:left 条目位于左侧,录入QTabBar的页头位于左侧
:maximized 条目处于最大化,例如最大化的QMdiSubWindow窗口
:minmized 条目处于最小化,例如最小化的QMdiSubWindow窗口
:movable 条目可移动的
:off 对于可以切换状态的条目,其状态处于“off”
:on
:open 条目处于打开状态,如QTreeView的一个展开条目
:pressed 条目上按下鼠标
:read-only 只读or不可编辑
:right 条目位于右侧
:selected 条目被选中
:top 条目位于顶端
:unchecked 没有选中
:vertical 条目处于垂直方向

辅助控制器

辅助控制器 说明
::indicator 复选框,单选框、可选菜单项或可选群组框的指示器
::menu-indicator 按钮的菜单指示器
::item 菜单

图片

图片

状态可以和状态结合:

例如:QCheckBox:check:hover{}

状态补充:QComboBox:editable{}; 状态还可以取反!editable;

QComboBox::down-arrow:on{}//如果组合框是打开的,向下箭头将下移一个像素

a:link是超级链接的初始状态

a:hover是把鼠标放上去时悬停的状况

a:active 是鼠标点击时

a:visited是访问过后的情况

text-align:设置字体位置,text-align:centre;

属性:

* padding:上右下左位置填充空间,位置在文字和窗体之间;支持padding-top;-right;-bottom;-left;

图片

动态加载样式QSS

可以适应两种情况:同一个widget/table里面同一控件存在两种样式;同一个控件需要两种不同变化:最大化,最小化,鼠标聚焦的时候;

https://blog.csdn.net/liang19890820/article/details/51693956

  • 水平线和垂直线Line 在样式表中是使用QFrame来设置
  • 日历控件的样式设置:

相关连接:https://blog.csdn.net/lycx1234/article/details/98883608

QCalendarWidget  QTableView 
{
   font: 11pt "思源黑体 CN Medium";
}
 
QCalendarWidget  QMenu {
   font: 10pt "思源黑体 CN Medium";
}
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/yinsizhilian/article/details/110405799

智能推荐

linux下 boa cgi移植(转)-程序员宅基地

文章浏览阅读181次。http://blog.chinaunix.net/u1/33226/showart_485155.html嵌入式WEB服务器常见的有lighttpd shttpd thttpdboa mathopd minihttpdappwebgoahead=========================================================..._cgipath /bin:/usr/bin:/usr/local/bin

结合bootstrap fileinput插件和Bootstrap-table表格插件,实现文件上传、预览、提交的导入Excel数据操作流程...-程序员宅基地

文章浏览阅读452次。1、bootstrap-fileinpu的简单介绍在前面的随笔,我介绍了Bootstrap-table表格插件的具体项目应用过程,本篇随笔介绍另外一个Bootstrap FieInput插件的使用,整合两者可以实现我们常规的Web数据导入操作,导入数据操作过程包括有上传文件,预览数据,选择并提交记录等一系列操作。关于这个插件,我在早期随笔《Boots..._c# bootstrap excel导入

编写应用程序,有一个标题为“计算”的窗口,窗口的布局为FlowLayout布局。窗口中添加两个文本区,当我们在一个文本区中输入若干数时,另一个文本区不断地更新求和及平均值。_实现标题计算的窗口,随着用户输入,输出求和及平均值-程序员宅基地

文章浏览阅读4.8k次,点赞8次,收藏46次。import javax.swing.*;import javax.swing.event.DocumentEvent;import javax.swing.event.DocumentListener;import java.awt.*;import java.util.Scanner;public class Dzj { public static void main(String[] args) { new DzjWin("计算"); }}class ._实现标题计算的窗口,随着用户输入,输出求和及平均值

Android 音视频采集与软编码总结_android 软编码算法-程序员宅基地

文章浏览阅读1.1w次,点赞11次,收藏36次。前言本文总结了笔者在 Android 音视频采集与软编码中的一些经验与技巧,包括移植 FFmpeg、YUV 视频帧处理、最新的 JNI 编写技巧、 ndk 开发技巧等,为了不扯太远本文不会对音视频编码的一些原理性东西进行剖析,也不会大量贴源码,更注重使用方法与流程的讲解。 文章最后将展示一个实现了音视频采集功能与本地视频压缩功能的完整项目。采用软编码利弊众所周知_android 软编码算法

css中级选择器_css 子类怎么设置-程序员宅基地

文章浏览阅读479次,点赞3次,收藏2次。讲述了一些常见的css中级选择器,例如派生选择器(所有子代)、直接子类选择器(只找儿子)、分组选择器(不同标签,相同样式时)、兄弟选择器(找右边临近的第一个元素)_css 子类怎么设置

平板鸿蒙系统实测,平板电脑已预装鸿蒙系统,我们来看看效果-程序员宅基地

文章浏览阅读1.6k次。就在近日,华为方面也是再次传来了好消息,根据华为心声社区的最新报道中,华为创始人任正非先生也正式对外透露了,华为最新平板电脑产品已经开始预装鸿蒙OS系统,这意味着大家一直非常期待的华为鸿蒙OS系统终于要被预装到华为平板电脑上,消费者很快就能够看到这款平板电脑上市销售了,但华为任正非并未透露具体的产品上市时间,但这也意味着华为在遭到谷歌的“断供”之后,华为鸿蒙OS系统、华为HMS生态系统服务,终于要..._鸿蒙系统平板

随便推点

CentOS 7 下Docker的安装与部署详细步骤(图文详解)_contos7 pageplug docker-程序员宅基地

文章浏览阅读6.2k次,点赞5次,收藏43次。Docker的安装与部署准备工作操作系统要求操作系统环境设置准备工作1、操作系统:VMWare虚拟机 、 CentOS 7VMware虚拟机下载和安装教程CentOS 7安装教程2、CentOS 7 操作系统网络可用。3、官方参考文档纯英文操作系统要求1、安装docker需要在centos7以上版本;2、linux内核版本需要在3.10以上,可通过uname -r 查看系统内核。操作系统环境设置1、关闭防火墙centos7 以后默认用firewalld取代iptables,这两个防_contos7 pageplug docker

linux的tomcat下载,tomcat linux 64位下载-程序员宅基地

文章浏览阅读1.2k次。tomcat 8发布了,这里为大家带来了 linux版本下载,此版本为8.0.32 tomcat linux 64位下载,它是由Apache 所开发的一个核心项目,由于Tomcat 产品的技术先进、性能稳定,而且免费,因此该程序深受Java 爱好者的喜爱,此软件目前成为了比较流行的Web 应用服务器。下面有详细的安装配置教程,大家可以学习一下。官方介绍使用Apache Tomcat 软件了Jav..._tomcat linux64位下载

Laravel 5 系列入门教程(三)【最适合中国人的 Laravel 教程】_laravel layouts 单选框-程序员宅基地

文章浏览阅读852次。本教程示例代码见:https://github.com/johnlui/Learn-Laravel-5 大家在任何地方卡住,最快捷的解决方式就是去看我的示例代码。本篇教程中,我们将利用 Laravel 5 自带的开箱即用的 Auth 系统对我们的后台进行权限验证,并构建出前台页面,对 Pages 进行展示。1. 权限验证后台地址为 http://fuck._laravel layouts 单选框

CentOS7下安装MySQL5.7.29_mysql-5.7.29-1.el7.x86_64.rpm-bundle.tar-程序员宅基地

文章浏览阅读1.3k次。准备工作Linux 命令教程以下有的不懂命令可以在这里查询理解https://www.runoob.com/linux/linux-comm-rpm.html查看CentOS7版本cat /etc/redhat-release卸载mariadb查询所有mariadb套件同时卸载掉rpm -qa|grep mariadbrpm -e --nodeps mariadb-libs..._mysql-5.7.29-1.el7.x86_64.rpm-bundle.tar

nginx的部署和常用命令_pcre-devel-8.43-程序员宅基地

文章浏览阅读200次。nginx的部署前言在部署项目时,用到nginx,很多时候在内网,无法在线安装,这里使用在线,离线两种方式,部署依赖。一、安装说明系统环境:CentOS7.5软件:nginx-1.18.0.tar.gz其他所需软件:gcc-4.8.0.tar.gz、pcre-8.43.tar.gz、zlib-1.2.11.tar.gz、openssl-1.0.2p.tar.gz安装方式:源码编译安装安装位置:/usr/local/nginxroot用户操作安装,否则无法创建默认目录安装包下载地址:ng_pcre-devel-8.43

c语言求最大公约数和最小公倍数_最大公因数和最小公倍数求法之我见-程序员宅基地

文章浏览阅读1.3k次。随着课程改革的不断推进,老师们逐渐认识到,教材仅仅是课程的一种重要载体,而不是课程的全部。任何课程实施,都需要和开发大量的课程资源。下面就和大家谈一谈除了教材资源,怎样用“数学眼光”来搜索教学资源的。众所周知,最大公因数和最小公倍数有着广泛的应用,特别是在分数四则运算中,更是不可缺失。所以求最大公因数和最小公倍数是小学高年级数学教学的重点,也是难点。下面列举两个数的最大公因数和最小公倍数..._用c语言求24和36的最大公倍数