Qt Style Sheet实践(三):QCheckBox和QRadioButton
导读
单选按钮(QRadioButton)和复选框(QCheckBox)是界面设计中的重要元素。单选按钮只允许用户在一组选项中选择一个,且当其中一个被选中的时候,按钮组中的其他单选按钮自动取消。复选框则可以让用户同时选中多个选项,这在多项选择的情况下非常有用。此外,复选框经过设置还具备第三种状态:未决状态(partially checked)。单选按钮和复选框应用广泛,在WEB表单、软件配置界面常常是不可或缺的元素。这篇博文主要讲述Qt中单选按钮和复选框如何通过样式表进行外观定制。
基本实现
单选按钮(QRadioButton)的基本特征是互斥。当一个按钮选中,系统自动取消其他按钮的选中状态。当然,前提是这些按钮都要放置同一个父组件(Parent Widget)中。我们简单的用Qt Designer拖个按钮组,按Ctrl+R进行预览:
效果还不错,朴素简单。在这里,我们将一组单选按钮全部放到了一个QGroupBox里面。这样,当一个按钮选中的时候其他选中的按钮将被自动取消。但是缺点是:如果我们想要获取当前被选中的按钮是哪一个,不太方便判断。一个简单而粗暴的方法是,循环遍历每个单选按钮的状态进行检查。显然这样的方法太笨拙。另外的一个方法是,将这一组单选按钮全部添加到QButtonGroup中去。QButtonGroup是一个容器组件,在Qt Designer中我们找不到这个组件,因为它是不可见的,仅仅是在后台工作的无名英雄。因此,我们需要做的是将所有的单选按钮添加进去,之后通过QButtonGroup的方法可以快速查询按钮状态。具体参见《QT中获取选中的radioButton的两种方法》及《QT中根据ID设置radio按钮》。
如何进行样式定制呢?QRadioButton定制分成两个两个部分:选中按钮和文本。其中我们重点要定制的就是选中按钮,为此我们需要准备一些状态图片。看看Qt帮助手册的内容:
QRadioButton::indicator { # indicator是一个子组件,这里的width和height分别指定按钮的宽和高
width: 13px;
height: 13px;
} QRadioButton::indicator::unchecked { # 未选中时状态,也即正常状态
image: url(:/images/radiobutton_unchecked.png);
} QRadioButton::indicator:unchecked:hover { # 未选中时,鼠标悬停时的状态
image: url(:/images/radiobutton_unchecked_hover.png);
} QRadioButton::indicator:unchecked:pressed { #未选中时,按钮下按时的状态
image: url(:/images/radiobutton_unchecked_pressed.png);
} QRadioButton::indicator::checked { # 按钮选中时的状态
image: url(:/images/radiobutton_checked.png);
} QRadioButton::indicator:checked:hover { # 按钮选中时,鼠标悬停状态
image: url(:/images/radiobutton_checked_hover.png);
} QRadioButton::indicator:checked:pressed { # 按钮选中时,鼠标下按时的状态
image: url(:/images/radiobutton_checked_pressed.png);
}
看上面的几条样式语句,我们显然要准备六张图片。利用不同的伪状态设置单选按钮的::indicator子组件。找图片是一件困难的事情,因此我只准备了四张图片。按钮下按时就不设置图片了:
我们自己编写的QSS代码如下:
QRadioButton {
spacing: 5px;
font-size: 14px;
color: rgb(24, 220, 88); # 连同 font-size一齐设置按钮的文本样式
} QRadioButton::indicator { # 设置为我们图片的大小
width: 15px;
height: 15px
} QRadioButton::indicator:checked { # 按钮选中的状态
image: url(:/buttonbg/radio_down);
} QRadioButton::indicator:disabled { # 按钮禁用时的状态
image: url(:/buttonbg/radio_disable);
} QRadioButton::indicator:unchecked { # 未选中时的状态
image: url(:/buttonbg/radio_normal);
} QRadioButton::indicator:unchecked:hover { # 未选中时的鼠标悬停状态
image: url(:/buttonbg/radio_hover);
}
最终效果如下:
当然,图片还可以换成方形的。不过传统设计中单选按钮都设计成了原型,这里的图片来自金山卫士。相比于复选框(QCheckBox),单选按钮少了一个状态:indeterminate。通过我们QCheckBox的setTristate()可以将一个复选框设置成indeterminate状态。对于复选框我们编写如下的QSS代码:
QCheckBox {
spacing: 5px; # 在这里我们也可以设置复选的文本样式
} QCheckBox::indicator {
width: 15px;
height: 15px;
} QCheckBox::indicator:unchecked {
image: url(:/buttonbg/checkbox_normal);
} QCheckBox::indicator:unchecked:disabled {
image: url(:/buttonbg/checkbox_disable);
} QCheckBox::indicator:unchecked:hover {
image: url(:/buttonbg/checkbox_hover);
} QCheckBox::indicator:checked {
image: url(:/buttonbg/checkbox_down);
} QCheckBox::indicator:indeterminate {
image: url(:/buttonbg/checkbox_indeterminate);
}
可以看到,基本定制方法和QRadioButton一样,只是多了一个indeterminate状态:
其中,Ruby复选框被设置成了禁用,而python复选框则设置为了indeterminate状态。外观上并没有太大的变化。如果要改变复选框的文本样式,也可以和上面QRadioButton一样设置。总的来说,QRadioButton和QCheckBox的定制还是挺简单的,任务量不大,因为其本身也足够简单。
效果对比
最终的效果对比下:
总结
1. 样式定制的重点是::indicator,利用伪状态为::indicator设置好不同状态时的背景图片。
2. 理解QRadioButton和QCheckBox的不同状态。
Qt Style Sheet实践(三):QCheckBox和QRadioButton的更多相关文章
- Qt Style Sheet实践(一):按钮及关联菜单
导读 正如web前端开发中CSS(Cascade Style Sheet)的作用一样,Qt开发中也可以使用修改版的QSS将逻辑业务和用户界面进行隔离.这样,美工设计人员和逻辑实现者可以各司其职而不受干 ...
- Qt Style Sheet实践(一):按钮及关联菜单(24K纯开源,一共四篇)
导读 正如web前端开发中CSS(Cascade Style Sheet)的作用一样,Qt开发中也可以使用修改版的QSS将逻辑业务和用户界面进行隔离.这样,美工设计人员和逻辑实现者可以各司其职而不受干 ...
- Qt Style Sheet实践(二):组合框QComboBox的定制
导读 组合框是一个重要且应用广泛的组件,一般由两个子组件组成:文本下拉单部分和按钮部分.在许多既需要用户选择.又需要用户手动输入的应用场景下,组合框能够很好的满足我们的需求.如我们经常使用的聊天软件Q ...
- Qt Style Sheet实践(二):组合框QComboBox的定制(24K纯开源)——非常漂亮
组合框是一个重要且应用广泛的组件,一般由两个子组件组成:文本下拉单部分和按钮部分.在许多既需要用户选择.又需要用户手动输入的应用场景下,组合框能够很好的满足我们的需求.如我们经常使用的聊天软件QQ登录 ...
- Qt Style Sheet实践(四):行文本编辑框QLineEdit及自动补全
导读 行文本输入框在用于界面的文本输入,在WEB登录表单中应用广泛.一般行文本编辑框可定制性较高,既可以当作密码输入框,又可以作为文本过滤器.QLineEdit本身使用方法也很简单,无需过多的设置就能 ...
- Qt 外观之一 ——Qt Style Sheet
Qt Style Sheet 目录 使用 对于应用程序 创建自定义控件 QSS语法 一般选择器(selector) 伪选择器 解决冲突 使用specificity Namespace冲突 级联效应 设 ...
- Qt---自定义界面之 Style Sheet
这次讲Qt Style Sheet(QSS),QSS是一种与CSS类似的语言,实际上这两者几乎完全一样.既然谈到CSS我们就有必要说一下盒模型. 1. 盒模型(The Box Model) 在样式中, ...
- 用Qt写软件系列三:一个简单的系统工具之界面美化
前言 在上一篇中,我们基本上完成了主要功能的实现,剩下的一些导出.进程子模块信息等功能,留到后面再来慢慢实现.这一篇来讲述如何对主界面进行个性化的定制.Qt库提供的只是最基本的组件功能,使用这些组件开 ...
- Qt的皮肤设计(Style Sheet)
Qt的皮肤设计,也可以说是对Qt应用程序的界面美化,Qt使用了一种类CSS的样式规则QSS. 一.Style Sheet的应用 1.直接在程序代码中设置样式,利用setStyleSheet()方法 ...
随机推荐
- Linux文件系统性能优化 (转)
http://blog.chinaunix.net/uid-7530389-id-2050116.html 由于各种的I/O负载情形各异,Linux系统中文件系统的缺省配置一般来说都比较中庸,强调普遍 ...
- python数据结构之图的实现
python数据结构之图的实现,官方有一篇文章介绍,http://www.python.org/doc/essays/graphs.html 下面简要的介绍下: 比如有这么一张图: A -> B ...
- 前端测试回顾及我们为什么选择Karma
前端测试,或者UI测试一直是业界一大难题.最近Q.js使用Karma作为测试任务管理工具,本文在回顾前端测试方案的同时,也分析下为什么Q.js选用Karma而不是其他测试框架. 像素级全站对比 曾今有 ...
- WPF中System.Diagnostics.Process.Start的妙用
我们经常会遇到在Winform或是WPF中点击链接或按钮打开某个指定的网址, 或者是需要打开电脑中某个指定的硬盘分区及文件夹, 甚至是"控制面板"相关的东西, 那么如何做呢? 答案 ...
- 用Zim替代org-mode?
三年前我玩过Zim,当时还写了一篇<Zim - 普通人的Org-mode>,当时还说我还是会坚持使用emacs org-mode.但最近我又在考虑是不是回头用Zim来写博客文章.整理知识库 ...
- PopupWindow错误:PopupWindow$1.onScrollChanged 出现 NullPointerException和PopupViewContainer.dispatchKeyEvent 出现 NullPointerException
错误1: java.lang.NullPointerException at android.widget.PopupWindow$1.onScrollChanged(PopupWindow.java ...
- HDU 4107 Gangster Segment Tree线段树
这道题也有点新意,就是须要记录最小值段和最大值段,然后成段更新这个段,而不用没点去更新,达到提快速度的目的. 本题过的人非常少,由于大部分都超时了,我严格依照线段树的方法去写.一開始竟然也超时. 然后 ...
- vim中多标签和多窗口的使用
用vim进行编辑的时候常常因为要编辑多个文件或者是编辑一个文件要参考其他文件而烦恼,这里介绍两种方法: 1.多标签 直接在编辑的时候输入: vim -p 要编辑的文件名 如vim -p * 就是编辑当 ...
- 使用SQL Server 2014 In-Memory 内存数据库时需要注意的地方
转载: http://www.infoq.com/cn/articles/sql-server-2014-memory-database http://www.cnblogs.com/Amaranth ...
- Workday为何迟迟不进入中国
全球知名HRM SaaS厂商Workday在世界各地攻城拔寨,俨然是HR SaaS的代名词,更是HRM市场的领导品牌.但是却单单在中国市场悄无声息,除了为数不多的海尔海外.联想海外等规模客户和部分ro ...