这次讲Qt Style Sheet(QSS),QSS是一种与CSS类似的语言,实际上这两者几乎完全一样。既然谈到CSS我们就有必要说一下盒模型。

1. 盒模型(The Box Model)

在样式中,每一个UI控件都可以抽象成一个盒模型:

盒模型由4个同心矩形组成,从外到内分别是外边距边界内衬内容,大部分UI视觉内容都包含在内容矩形中。默认情况下,前三个矩形的大小属性都是0,因此这四个矩形都重叠成一个了。这里与前三个大小相关的属性有:

  • margin:代指外边距矩形与边界矩形之间的间距。
  • border-width:代指外边距矩形与内衬矩形之间的间距。
  • padding:代指内衬矩形与内容矩形之间的间距。

2. QSS(Qt Style Sheet)

QSS与CSS相似,因此这里只大概介绍QSS的特点:

  • 子控件:Qt允许我们控制复杂控件的子控件,例如QComboBox的下拉按钮、QCheckBox的勾选框等等。
  • 伪状态:Qt包含一些特殊的状态:last、first等。
  • 支持自定义类的样式设置:得力于Qt的元对象系统,QSS可以对用户自己定义的类进行样式设置。
  • 命名空间特殊语法:由于C++中的命名控件写法(::)与Q 的子控件写法冲突,因此改用--来表示命名空间。
  • Qt属性支持:任何通过Q_PROPERTY定义的属性和Q_ENUM枚举类都可以被样式化。

3. 自定义样式实例

这里我们通过一个示例程序来接触QSS,因为实例程序涉及多个控件但我们篇幅有限,我们只介绍菜单相关的样式设置。菜单分为两部分:菜单栏(QMenuBar)、菜单(QMenu)。

3.1 菜单栏样式

我们把菜单栏宽度设置成大于等于菜单item的宽度60px(这里的width不指代整个菜单栏的宽度,比较奇怪),防止item的宽度被菜单栏的宽度限制,并且设置灰色点边框。

QMenuBar {
width:60px;
background-color:white;
border:1px dotted gray; }

item这里代指菜单栏上的每一项菜单,我们设置边框位groove以使其看起来有凹凸效果;设置margin-right,这样两个item之间会有合适的间隔;我们还在不同的状态下设置不同的背景颜色,这样交互上比较友好。

QMenuBar::item {
height:15px;
width:60px; background:transparent;
border:2px groove gray;
margin-right:1px;
}
QMenuBar::item:selected {
color:green;
background-color:rgb(236, 242, 245);
}
QMenuBar::item:pressed {
color:green;
background-color:rgb(233, 227, 227);
}

3.2 菜单样式

菜单我们设置成与菜单栏一样;菜单的item指代每一个菜单选项,我们对其设置合适的margin和padding大小,border、item的selected和pressed状态设置成菜单栏的样式,使其看起来布局空间合理且与菜单栏一致:

QMenu {
background-color:white;
border:1px solid rgb(0, 171, 255);
padding:1px;
}
QMenu::item { height:15px;
width:60px; background-color:white;
margin:1px; padding:2px 2px 2px 20px; border:2px groove gray;
}
QMenu::item:selected {
color:green;
background-color:rgb(236, 242, 245);
}
QMenu::item:pressed {
color:green;
background-color:rgb(233, 227, 227);
}

我们重绘菜单之间的间隔条(separator),简单的用浅蓝色填充1像素高的背景:

QMenu::separator {
height:1px;
margin:1px;
background-color:lightblue;
}

菜单的选中指示框和子菜单我们用图片来显示,图片选用png格式,保持透明通道,使其与背景一致:

QMenu::indicator:checked {
width:10px;
height:10px;
margin-left:3px;
border:0px solid blue;
image:url(:/checked-icon.png);
}
QMenu::right-arrow {
width:15px;
height:15px;
image:url(:/right-arrow.png);
}

4. 运行结果

程序的完整运行结果如下:

代码见链接

5. 总结

优点:

  • 开发效率高,使用简单。
  • QSS绘制模式统一(盒模型),一次学习多处使用。

缺点:

  • 与CSS一样,某些绘制细节比较复杂,需要尝试。例如QLCDNumber没有文档说明可以应用QSS,但是实际上可以设置border和color,然而hover状态下color属性不管用。
  • 绘制控件相对比较受限制。因为同CSS一样,绘制都是按照既有的规则进行,自然不能像Qt原生控件那样灵活(但是个人觉得很多场景用QSS就够用了)。
  • 某些控件的子控件不能独立绘制。一旦一个子控件设置了样式,其他子控件也需要设置。

Qt---自定义界面之 Style Sheet的更多相关文章

  1. Qt Style Sheet实践(一):按钮及关联菜单

    导读 正如web前端开发中CSS(Cascade Style Sheet)的作用一样,Qt开发中也可以使用修改版的QSS将逻辑业务和用户界面进行隔离.这样,美工设计人员和逻辑实现者可以各司其职而不受干 ...

  2. Qt的皮肤设计(Style Sheet)

      Qt的皮肤设计,也可以说是对Qt应用程序的界面美化,Qt使用了一种类CSS的样式规则QSS. 一.Style Sheet的应用 1.直接在程序代码中设置样式,利用setStyleSheet()方法 ...

  3. Qt Style Sheet实践(一):按钮及关联菜单(24K纯开源,一共四篇)

    导读 正如web前端开发中CSS(Cascade Style Sheet)的作用一样,Qt开发中也可以使用修改版的QSS将逻辑业务和用户界面进行隔离.这样,美工设计人员和逻辑实现者可以各司其职而不受干 ...

  4. Qt 外观之一 ——Qt Style Sheet

    Qt Style Sheet 目录 使用 对于应用程序 创建自定义控件 QSS语法 一般选择器(selector) 伪选择器 解决冲突 使用specificity Namespace冲突 级联效应 设 ...

  5. CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页。

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...

  6. CSS(Cascading Style Sheet)简述

    CSS(Cascading Style Sheet)简述 什么是CSS? css是指层叠样式表 css定义了如何显示HTML元素 css的诞生是为了解决内容与表现分离的问题,可以极大地提高工作效率 样 ...

  7. No style sheet with given id found错误

    在chrome中打开html页面,报错No style sheet with given id found,解决方如下

  8. 00Cascading Style Sheet

    Cascading Style Sheet CSS(Cascading Style Sheet)即层叠样式表,简称样式表.要理解层叠样式表的概念先要理解样式的概念.样式就是对网页中的 元素(字体.段落 ...

  9. Qt控件样式 Style Sheet Demo

    迟来的笔记,作为一个程序员每日记事已养成习惯,离开许久,不知不觉已喜欢用文字表达对技术的热爱,学无止境! Qt – 一个跨平台应用程序和UI开发框架:它包括跨平台类库.集成开发工具和跨平台 IDE,使 ...

随机推荐

  1. RabbitMQ之比较好的资料

    http://mysql.taobao.org/index.php/Rabbitmq http://www.cnblogs.com/me-sa/archive/2012/10/17/rabbitmq_ ...

  2. 读lodash源码之从slice看稀疏数组与密集数组

    卑鄙是卑鄙者的通行证,高尚是高尚者的墓志铭. --北岛<回答> 看北岛就是从这两句诗开始的,高尚者已死,只剩卑鄙者在世间横行. 本文为读 lodash 源码的第一篇,后续文章会更新到这个仓 ...

  3. tensorflow 从入门到摔掉肋骨 教程二

    构造你自己的第一个神经网络 通过手势的图片识别图片比划的数字:1) 现在用1080张64*64的图片作为训练集2) 用120张图片作为测试集  定义初始化值 def load_dataset(): ...

  4. 【Win 10 应用开发】UI Composition 札记(七):基于表达式的动画

    上一篇烂文中,老周给大伙伴们介绍过了几个比较好玩的动画.本篇咱们深化主题,说一说基于表达式的动画.这名字好理解,就是你可以用公式 / 等式来产生动画的目标值.比如,你想让某个可视化对象的高度减半,你的 ...

  5. SQL Server 基本操作之三种增加法

    前言: 数据库操作避免不了对数据的操作,操作方法大同小异,万变不离其宗,今就写一下各种花式操作的根本增删改查四种操作,今天我们就来说一下增加操作的三种方法 正文: 增加操作是对数据库进行数据行的添加, ...

  6. [转]the service mysql57 failed the most recent status[/br]mysql57 was not found解决办法

    转自:http://forums.mysql.com/read.php?169,622722,622877#msg-622877 安装完mysql5.7.12后想要stop或者restart都会出现以 ...

  7. 照虎画猫写自己的Spring——依赖注入

    前言 上篇<照虎画猫写自己的Spring>从无到有讲述并实现了下面几点 声明配置文件,用于声明需要加载使用的类 加载配置文件,读取配置文件 解析配置文件,需要将配置文件中声明的标签转换为F ...

  8. javascript面向对象编程(OOP)——汇总

    目录 一.JS的解析与执行过程 预处理阶段 执行阶段 二.作用域 块作用域 函数作用域 动态作用域 词法作用域 三.闭包 什么是闭包 闭包的好处 四.类与对象 对象 类 原型(prototype) t ...

  9. c语言贪吃蛇详解3.让蛇动起来

    c语言贪吃蛇详解3.让蛇动起来 前几天的实验室培训课后作业我布置了贪吃蛇,今天有时间就来写一下题解.我将分几步来教大家写一个贪吃蛇小游戏.由于大家c语言未学完,这个教程只涉及数组和函数等知识点. 上次 ...

  10. shell自动化巡检

    #!/bin/bash#主机信息每日巡检 IPADDR=$(ifconfig eth0|grep 'inet addr'|awk -F '[ :]' '{print $13}')#环境变量PATH没设 ...