[QT笔记]用图片自定义QCheckBox样式

原创 2016年08月30日 10:21:05

记录一下大致的过程,避免将来忘记。


实现环境: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"文件,用文本编辑器打开,填写以下内容然后保存:

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文件并设置程序为自定义的样式:

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样式的示例:

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



版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

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

导读       单选按钮(QRadioButton)和复选框(QCheckBox)是界面设计中的重要元素。单选按钮只允许用户在一组选项中选择一个,且当其中一个被选中的时候,按钮组中的其他单选按钮自...

Qt之QCheckBox

简述QCheckBox继承自QAbstractButton,它提供了一个带文本标签的复选框。QCheckBox(复选框)和QRadioButton(单选框)都是选项按钮。这是因为它们都可以在开(选中)...

漂亮的checkbox样式 (多选框)

说起来汗颜,如此常用的checkbox我改变样式,居然需要百度,而且百度很久,更可气的是百度很久找不到可行的解决方案。 后来在csscheckbox.com上找到很多样式,结果一测兼容性IE不行。如此...

QT中的复选框改变大小,并改为打勾

QT中的checkbox默认选中是打叉的,并且很小。想该大点,并修改选中的样子为打勾。 如下: QCheckBox::indicator {width: 13px;height: 13px;}//改...

Qt 之 样式表的使用——设置样式的方法

一、简述我们通常在使用Qt开发的过程中都会使用样式表来美化我们的界面,关于如何使用样式表的资料也很多,样式表的使用方法也千变万化。为了搭建一个漂亮的界面那么必须学会如何使用样式表,Qt帮助文档中提供了...

Qt入门-单选框和复选框

在Qt GUI中,单选框类是QRadioButton,复选框类是QCheckBox。它们都是QAbstractButton的派生类。 (1)单选框 示例: //设置为选择状态 radioBut...
  • xgbing
  • xgbing
  • 2012-07-20 11:25
  • 26475

Qt学习笔记外观篇(七):QCheckBox

QCheckBox作为一个常用的窗口部件,

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

http://blog.csdn.net/itjobtxq/article/details/9629881

QT5学习之复选框类QCheckBox的三态

The QCheckBox widget provides a checkboxwith a text label. Header:#include qmake:QT += widgets In...

QT之CheckBox单项选择与多项选择

QT之CheckBox单项选择与多项选择QT之CheckBox单项选择与多项选择 开篇之叙 效果图 上代码 结尾开篇之叙 今天简单的给大家介绍下CheckBox的单项选择与多项选择。我们在使用Ch...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)