相关文章推荐
讲道义的鸡蛋面  ·  Elasticsearch ...·  1 年前    · 
爱旅游的红茶  ·  EP02 The Basics - 掘金·  1 年前    · 

实现环境: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

  1. QCheckBox{
  2. spacing: 5px;
  3. }
  4. QCheckBox::indicator{
  5. width: 15px;
  6. height: 15px;
  7. }
  8. QCheckBox::indicator:unchecked{
  9. image:url(:/CheckBox/res/unchecked.png);
  10. }
  11. QCheckBox::indicator:checked{
  12. image:url(:/CheckBox/res/checked.png);
  13. }
  14. QCheckBox::indicator:checked:disabled{
  15. image:url(:/CheckBox/res/checkedDisabled.png);
  16. }


5.在/CheckBox前缀中添加myStyle.qss文件,这一次不必复制到项目文件夹下,因为它已经在项目文件夹下了。

6.保存资源文件resource.qrc。

7.接着在main.cpp文件中添加代码,读取qss文件并设置程序为自定义的样式:

[cpp] view plain copy

  1. int main( int argc, char *argv[])
  2. {
  3. QApplication a(argc, argv);
  4. //获取并设置程序为自定义样式
  5. QFile styleSheet( ":/CheckBox/res/myStyle.qss" );
  6. styleSheet.open(QIODevice::ReadOnly);
  7. a.setStyleSheet(styleSheet.readAll());
  8. MainWindows w;
  9. w.show();
  10. return a.exec();
  11. }


8.然后可以在程序中添加CheckBox查看效果:

9.QCheckBox可以支持自定义的效果还有很多,以下是Qt Style Sheets Examples当中关于QCheckBox样式的示例:

[html] view plain copy

  1. QCheckBox {
  2. spacing: 5px;
  3. }
  4. QCheckBox::indicator {
  5. width: 13px;
  6. height: 13px;
  7. }
  8. QCheckBox::indicator:unchecked {
  9. image: url(:/images/checkbox_unchecked.png);
  10. }
  11. QCheckBox::indicator:unchecked:hover {
  12. image: url(:/images/checkbox_unchecked_hover.png);
  13. }
  14. QCheckBox::indicator:unchecked:pressed {
  15. image: url(:/images/checkbox_unchecked_pressed.png);
  16. }
  17. QCheckBox::indicator:checked {
  18. image: url(:/images/checkbox_checked.png);
  19. }
  20. QCheckBox::indicator:checked:hover {
  21. image: url(:/images/checkbox_checked_hover.png);
  22. }
  23. QCheckBox::indicator:checked:pressed {
  24. image: url(:/images/checkbox_checked_pressed.png);
  25. }
  26. QCheckBox::indicator:indeterminate:hover {
  27. image: url(:/images/checkbox_indeterminate_hover.png);
  28. }
  29. QCheckBox::indicator:indeterminate:pressed {
  30. image: url(:/images/checkbox_indeterminate_pressed.png);
  31. }


扩展阅读: 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(单选框)都是选项按钮。这是因为它们都可以在开(选中)或者关(未选中)之间切换。区别是对用户选择的限制:单选框定义了“多选一”的选择,而复选框提供的是“多选多”的选择。 尽管在技术上...