效果还不错,朴素大略。在这里,我们将一组单选按钮全部放到了一个QGroupBox里面。这样,当一个按钮选中的时候其他选中的按钮将被自动取消。但是缺陷是:如果我们想要获取当前当选中的按钮是哪一个,不太方便判断。一个大略而粗暴的方法是,循环遍历每个单选按钮的状态进行检讨。显然这样的方法太笨拙。其余的一个方法是,将这一组单选按钮全部添加到QButtonGroup中去。QButtonGroup是一个容器组件,在Qt Designer中我们找不到这个组件,由于它是不可见的,仅仅是在后台事情的无名英雄。因此,我们须要做的是将所有的单选按钮添加进去,之后通过QButtonGroup的方法可以快速查询按钮状态。
【领QT开拓教程学习资料,点击下方链接莬费领取↓↓,先码住不迷路~】
点击→领取「链接」
如何进行样式定制呢?QRadioButton定制分成两个两个部分:选中按钮和文本。个中我们重点要定制的便是选中按钮,为此我们须要准备一些状态图片。看看Qt帮助手册的内容:
1 QRadioButton::indicator { # indicator是一个子组件,这里的width和height分别指定按钮的宽和高 2 width: 13px; 3 height: 13px; 4 } 5 6 QRadioButton::indicator::unchecked { # 未选中时状态,也即正常状态 7 image: url(:/images/radiobutton_unchecked.png); 8 } 9 10 QRadioButton::indicator:unchecked:hover { # 未选中时,鼠标悬停时的状态11 image: url(:/images/radiobutton_unchecked_hover.png);12 }13 14 QRadioButton::indicator:unchecked:pressed { #未选中时,按钮下按时的状态15 image: url(:/images/radiobutton_unchecked_pressed.png);16 }17 18 QRadioButton::indicator::checked { # 按钮选中时的状态19 image: url(:/images/radiobutton_checked.png);20 }21 22 QRadioButton::indicator:checked:hover { # 按钮选中时,鼠标悬停状态23 image: url(:/images/radiobutton_checked_hover.png);24 }25 26 QRadioButton::indicator:checked:pressed { # 按钮选中时,鼠标下按时的状态27 image: url(:/images/radiobutton_checked_pressed.png);28 }
看上面的几条样式语句,我们显然要准备六张图片。利用不同的伪状态设置单选按钮的::indicator子组件。找图片是一件困难的事情,因此我只准备了四张图片。按钮下按时就不设置图片了:
我们自己编写的QSS代码如下:
1 QRadioButton { 2 spacing: 5px; 3 font-size: 14px; 4 color: rgb(24, 220, 88); # 连同 font-size一齐设置按钮的文本样式 5 } 6 7 QRadioButton::indicator { # 设置为我们图片的大小 8 width: 15px; 9 height: 15px10 }11 12 QRadioButton::indicator:checked { # 按钮选中的状态13 image: url(:/buttonbg/radio_down);14 }15 16 QRadioButton::indicator:disabled { # 按钮禁用时的状态17 image: url(:/buttonbg/radio_disable);18 }19 20 QRadioButton::indicator:unchecked { # 未选中时的状态21 image: url(:/buttonbg/radio_normal);22 }23 24 QRadioButton::indicator:unchecked:hover { # 未选中时的鼠标悬停状态25 image: url(:/buttonbg/radio_hover);26 }
终极效果如下:
当然,图片还可以换成方形的。不过传统设计中单选按钮都设计成了原型,这里的图片来自金山卫士。比较于复选框(QCheckBox),单选按钮少了一个状态:indeterminate。通过我们QCheckBox的setTristate()可以将一个复选框设置成indeterminate状态。对付复选框我们编写如下的QSS代码:
1 QCheckBox { 2 spacing: 5px; # 在这里我们也可以设置复选的文本样式 3 } 4 5 QCheckBox::indicator { 6 width: 15px; 7 height: 15px; 8 } 9 10 QCheckBox::indicator:unchecked {11 image: url(:/buttonbg/checkbox_normal);12 }13 14 QCheckBox::indicator:unchecked:disabled {15 image: url(:/buttonbg/checkbox_disable);16 }17 18 QCheckBox::indicator:unchecked:hover {19 image: url(:/buttonbg/checkbox_hover);20 }21 22 QCheckBox::indicator:checked {23 image: url(:/buttonbg/checkbox_down);24 }25 26 QCheckBox::indicator:indeterminate {27 image: url(:/buttonbg/checkbox_indeterminate);28 }
可以看到,基本定制方法和QRadioButton一样,只是多了一个indeterminate状态:
个中,Ruby复选框被设置成了禁用,而python复选框则设置为了indeterminate状态。外不雅观上并没有太大的变革。如果要改变复选框的文本样式,也可以和上面QRadioButton一样设置。总的来说,QRadioButton和QCheckBox的定制还是挺大略的,任务量不大,由于其本身也足够大略。
效果比拟终极的效果比拟下:
总结
1. 样式定制的重点是::indicator,利用伪状态为::indicator设置好不同状态时的背景图片。
2. 理解QRadioButton和QCheckBox的不同状态。