目录

任务

注意1

注意2

注意3

注意4

注意5

效果

---

任务

用滑动式按钮显示checkbox的选中和不选中状态。

 

注意1

为了能显示出按钮的圆角特征，建议图片格式为png格式，这样圆角以外的图片就透明了。

注意2

你可以在qss文件里配置qcheckbox的样式，也可以在代码里直接调用setStyleSheet函数。这里采用后者。

注意3

图片是贴在QCheckbox的方块上的。QCheckbox右边的文字不受影响。

而默认的QCheckbox的方块太小了。图标显示上去很不清楚。所以你要用下面的qss配置方块的尺寸：

QCheckBox::indicator {width: 90px; height: 60px;}

注意4

很多的qss示例里面，图片是作为资源文件被引用的，所以要把图片加入qt的资源里面。但是本示例并没有把图片加入资源。而是直接将图片放到构建目录下。setStyleSheet引用的图片路径就是以相对于构建目录而言的。

如下面的路径，是构建目录下的asset

setStyleSheet里面的路径也是相对于构建目录的：

QCheckBox::indicator:unchecked {border-image: url(./asset/on1.png)}

假如你使用qss文件配置样式，而你又不想把图片加到资源里面，则应在qss文件内引用相对于qss文件所在目录的路径。

注意5

下面的三行配置要在同一个setStyleSheet中使用，不能采用分开独立的几个setStyleSheet逐个调用，那样的话，前面的调用就无效了。

ui->checkBox->setStyleSheet("QCheckBox::indicator {width: 90px; height: 60px;}"
                                "QCheckBox::indicator:unchecked {border-image: url(./asset/on1.png) 0 0 0 0 stretch stretch}"
                                "QCheckBox::indicator:checked {border-image: url(./asset/off1.png) 0 0 0 0 stretch stretch}");
 

效果

 完整源码和可执行程序已经上传到了我的资源基于qt的程序，演示了如何通过setStyleSheet配置checkbox按钮的外观。-C++文档类资源-CSDN下载