Qt Style Sheet实践(三)：QCheckBox和QRadioButton

《Qt Style Sheet实践(三)：QCheckBox和QRadioButton》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、QtStyleSheet实践（三）：QCheckBox和QRadioButton导读   单选按钮（QRadioButton）和复选框（QCheckBox）是界面设计中的重要元素。单选按钮只允许用户在一组选项中选择一个，且当其中一个被选中的时候，按钮组中的其他单选按钮自动取消。复选框则可以让用户同时选中多个选项，这在多项选择的情况下非常有用。此外，复选框经过设置还具备第三种状态：未决状态（partiallychecked）。单选按钮和复选框应用广泛，在WEB表单、软件配置界面常常是不可或缺的元素。这篇博文主要讲述Qt中单选按钮和复选框如何通过样式表进行外观定制。基本实现   单选按钮

2、（QRadioButton）的基本特征是互斥。当一个按钮选中，系统自动取消其他按钮的选中状态。当然，前提是这些按钮都要放置同一个父组件（ParentWidget）中。我们简单的用QtDesigner拖个按钮组，按Ctrl+R进行预览：   效果还不错，朴素简单。在这里，我们将一组单选按钮全部放到了一个QGroupBox里面。这样，当一个按钮选中的时候其他选中的按钮将被自动取消。但是缺点是：如果我们想要获取当前被选中的按钮是哪一个，不太方便判断。一个简单而粗暴的方法是，循环遍历每个单选按钮的状态进行检查。显然这样的方法太笨拙。另外的一个方法是，将这一组单选按钮全部添加到QButtonG

3、roup中去。QButtonGroup是一个容器组件，在QtDesigner中我们找不到这个组件，因为它是不可见的，仅仅是在后台工作的无名英雄。因此，我们需要做的是将所有的单选按钮添加进去，之后通过QButtonGroup的方法可以快速查询按钮状态。具体参见《QT中获取选中的radioButton的两种方法》及《QT中根据ID设置radio按钮》。   如何进行样式定制呢？QRadioButton定制分成两个两个部分：选中按钮和文本。其中我们重点要定制的就是选中按钮，为此我们需要准备一些状态图片。看看Qt帮助手册的内容：QRadioButton::indicator{  #indic

4、ator是一个子组件，这里的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);} QRadioBut

5、ton::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_chec

6、ked_hover.png);} QRadioButton::indicator:checked:pressed{#按钮选中时，鼠标下按时的状态    image:url(:/images/radiobutton_checked_pressed.png);}    看上面的几条样式语句，我们显然要准备六张图片。利用不同的伪状态设置单选按钮的::indicator子组件。找图片是一件困难的事情，因此我只准备了四张图片。按钮下按时就不设置图片了：   我们自己编写的QSS代码如下：QRadioButton{    spacing:5px;    font-size:14px;    co

7、lor:rgb(24,220,88);  #连同font-size一齐设置按钮的文本样式} QRadioButton::indicator{  #设置为我们图片的大小    width:15px;    height:15px} QRadioButton::indicator:checked{  #按钮选中的状态    image:url(:/buttonbg/radio_down);} QRadioButton::indicator:disabled{