- 1、本文档共5页,可阅读全部内容。
- 2、有哪些信誉好的足球投注网站(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
Qt Style Sheet实践(三):QCheckBox和QRadioButton
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 {?? # 按钮选中的状态????
文档评论(0)