实现环境:Qt Creator 3.2.1 Based on Qt5.3.2 (GCC 4.9.2, 32bit)
项目类型:Qt Widgets Application
1.首先在项目中添加Qt资源文件,命名为resource.qrc。
2.然后在资源文件中添加前缀,默认是/new/prefix1,我将它改为/CheckBox。
3.然后向/CheckBox中添加文件checked.png、uncheked.png、checkedDisabled.png。
添加文件时,选中某个项目文件夹以外路径下的图片后,会提示“无效的文件路径,文件/***/***/checked.png 没有在资源文件的子目录中,您可以选择此文件到一个有效的路径”。此时选择“复制”,将图片复制到项目文件夹下。可以在项目文件夹里面创建文件夹res,进入该文件夹后,选择“保存”。之后也是将图片保存到res文件夹下。
4.在文件管理器中打开项目文件夹下的res文件夹,新建"myStyle.qss"文件,用文本编辑器打开,填写以下内容然后保存:
[plain]
view plain
copy
-
QCheckBox{
-
spacing: 5px;
-
}
-
-
QCheckBox::indicator{
-
width: 15px;
-
height: 15px;
-
}
-
-
QCheckBox::indicator:unchecked{
-
image:url(:/CheckBox/res/unchecked.png);
-
}
-
-
QCheckBox::indicator:checked{
-
image:url(:/CheckBox/res/checked.png);
-
}
-
-
QCheckBox::indicator:checked:disabled{
-
image:url(:/CheckBox/res/checkedDisabled.png);
-
}
5.在/CheckBox前缀中添加myStyle.qss文件,这一次不必复制到项目文件夹下,因为它已经在项目文件夹下了。
6.保存资源文件resource.qrc。
7.接着在main.cpp文件中添加代码,读取qss文件并设置程序为自定义的样式:
[cpp]
view plain
copy
-
int
main(
int
argc,
char
*argv[])
-
{
-
QApplication a(argc, argv);
-
-
//获取并设置程序为自定义样式
-
QFile styleSheet(
":/CheckBox/res/myStyle.qss"
);
-
styleSheet.open(QIODevice::ReadOnly);
-
a.setStyleSheet(styleSheet.readAll());
-
-
MainWindows w;
-
w.show();
-
-
return
a.exec();
-
}
8.然后可以在程序中添加CheckBox查看效果:
9.QCheckBox可以支持自定义的效果还有很多,以下是Qt Style Sheets Examples当中关于QCheckBox样式的示例:
[html]
view plain
copy
-
QCheckBox {
-
spacing: 5px;
-
}
-
-
QCheckBox::indicator {
-
width: 13px;
-
height: 13px;
-
}
-
-
QCheckBox::indicator:unchecked {
-
image: url(:/images/checkbox_unchecked.png);
-
}
-
-
QCheckBox::indicator:unchecked:hover {
-
image: url(:/images/checkbox_unchecked_hover.png);
-
}
-
-
QCheckBox::indicator:unchecked:pressed {
-
image: url(:/images/checkbox_unchecked_pressed.png);
-
}
-
-
QCheckBox::indicator:checked {
-
image: url(:/images/checkbox_checked.png);
-
}
-
-
QCheckBox::indicator:checked:hover {
-
image: url(:/images/checkbox_checked_hover.png);
-
}
-
-
QCheckBox::indicator:checked:pressed {
-
image: url(:/images/checkbox_checked_pressed.png);
-
}
-
-
QCheckBox::indicator:indeterminate:hover {
-
image: url(:/images/checkbox_indeterminate_hover.png);
-
}
-
-
QCheckBox::indicator:indeterminate:pressed {
-
image: url(:/images/checkbox_indeterminate_pressed.png);
-
}
扩展阅读:
Qt Style Sheet实践(三):QCheckBox和QRadioButton
要实现“漂亮”的Q
CheckBox
有两种方法,一种是贴图,一种是自绘,效果如下所示:这里两种方法都用到了
Qt
样式
表(style sheet),方法一直接加载
QSS
,通过check状态切换
图片
,
QSS
如下
方法一有三个明显的缺点
1.需要美工,效果图中的图是我自己p的,p的不太好,边缘锯齿明显
2.
checkbox
缩放时
图片
会变形
3.指示器(indicator)滑动时没有动画效果,好吧这里根本没滑动
相比方法一,方法二就没上面的三个缺点,其实现原理如下:
我们实现一个自己类QH
CheckBox
,该类继承
其中,Q
CheckBox
::indicator表示复选框的指示器,未选中状态下的
样式
使用
checkbox
_unchecked.png
图片
,选中状态下的
样式
使用
checkbox
_checked.png
图片
。方法是在
Qt
Creator中右击项目名称,在弹出的菜单中选择“添加新文件”,然后选择“
Qt
”->“
Qt
Resource File”,命名为resource.qrc,并在该文件夹下添加名为“images”的子文件夹,将两张
图片
放入该文件夹中。至此,我们成功
自定义
了Q
CheckBox
的
样式
。
在上述代码中,我们将复选框的stateChanged信号连接到
自定义
的槽函数on
CheckBox
StateChanged。在槽函数中,我们可以根据复选框的状态执行所需的操作。在主窗口的.cpp文件中,找到复选框的指针,并使用setStyleSheet()函数来设置
样式
。从左侧的控件列表中找到Q
CheckBox
控件,并将其拖放到您想要放置复选框的位置。在上面的代码中,我们设置了复选框的背景颜色、字体颜色和大小。通过修改
样式
和添加
自定义
功能,您可以根据自己的需求创建独特的复选框控件。步骤 5: 编译和运行。
border: 1px solid gray; /* 边框 */
border-radius: 3px; /* 圆角 */
padding: 1px 18px 1px 3px; /* 字体填衬 */
color: #000;
font: normal normal 15px "Mi
1.首先在项目中添加
Qt
资源文件,命名为resource.qrc。
2.然后在资源文件中添加前缀,默认是/new/prefix1,我将它改为/
CheckBox
。
3.然后向/
CheckBox
中添加文件checke
Q
CheckBox
继承自QAbstractButton,它提供了一个带文本标签的复选框。
Q
CheckBox
(复选框)和QRadioButton(单选框)都是选项按钮。这是因为它们都可以在开(选中)或者关(未选中)之间切换。区别是对用户选择的限制:单选框定义了“多选一”的选择,而复选框提供的是“多选多”的选择。
尽管在技术上...