Qt之自定义QCheckBox

已于 2022-06-16 15:11:25 修改
阅读量8.4k 收藏 12
点赞数 8
CC 4.0 BY-SA版权
分类专栏： Qt实用编程技术 文章标签： Qt QCheckBox QSS
于 2017-11-27 11:33:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/caoshangpa/article/details/78643161
本文介绍了如何在Qt中自定义QCheckBox，包括使用QSS加载图片和自绘实现，以达到更美观的效果。自定义的QHCheckBox类通过QPropertyAnimation实现了动画效果，解决了方法一中的图片变形和无动画问题。代码实现包括重写mousePressEvent、paintEvent和resizeEvent等方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一.效果

要实现“漂亮”的QCheckBox有两种方法，一种是贴图，一种是自绘，效果如下所示：


二.实现

这里两种方法都用到了Qt样式表(style sheet)，方法一直接加载QSS，通过check状态切换图片，QSS如下

    QCheckBox::indicator{
        width: 80px;
        height: 40px;
    }
    QCheckBox::indicator:unchecked {
    border-image: url(:/icons/CheckOff.png);
    }
    QCheckBox::indicator:checked {
    border-image: url(:/icons/CheckOn.png);
    }

方法一有三个明显的缺点
1.需要美工，效果图中的图是我自己p的，p的不太好，边缘锯齿明显
2.checkbox缩放时图片会变形
3.指示器（indicator）滑动时没有动画效果，好吧这里根本没滑动
相比方法一，方法二就没上面的三个缺点，其实现原理如

了解本专栏 订阅专栏 解锁全文 超级会员免费看
QtQuick PC端开发实战系列(13)_自定义CheckBox
zhengtianzuo的博客
03-05 416
总目录传送门 本博文技术等级: ★★☆☆☆☆☆☆☆☆ 联系方式: 作者 郑天佐 QQ 278969898 主页 http://www.camelstudio.cn 邮箱 camelsoft@163.com 博客 http://blog.youkuaiyun.com/zhengtianzuo06 github https://github.com/zhengtianzuo QQ群 199672080 觉得分享的内容还不错, 就请作者喝杯咖啡吧~~ ...
QT:QSS自定义 QCheckBox实例
希望我的博客，能帮上你解决学习中工作中所遇到的问题
07-02 858
QT:QSS自定义 QCheckBox实例
Qt之QCheckBox
weixin_34221773的博客
07-07 4421
简述 QCheckBox继承自QAbstractButton，它提供了一个带文本标签的复选框。 QCheckBox（复选框）和QRadioButton（单选框）都是选项按钮。这是因为它们都可以在开（选中）或者关（未选中）之间切换。区别是对用户选择的限制：单选框定义了“多选一”的选择，而复选框提供的是“多选多”的选择。 尽管在技术上...
Qt自定义控件 - CheckBox自定义控件
平头猿小哥的博客
03-23 1048
Qt自定义控件积累一
QCheckBox 调整复选框大小
最新发布
Jonton_Lee的博客
05-29 211
QCheckBox 调整复选框大小
Qt QCheckBox自定义样式
weixin_40207422的博客
02-23 4537
效果图 1.实现QCheckBox控件 layoutDerection属性可以设置checkBox的打√在左边还是右边 //整体checkbox设置 QCheckBox{ border-image: url(:/src/image_icon/Rectangle 1621.png); color:white; } QCheckBox:unchecked{ border-image: url(:/src/image_icon/Rectangle 1621.png); } QC...
Qt 自定义Checkbox和QColorDialog 颜色调试框委托
07-30
Qt 自定义Checkbox和QColorDialog 颜色调试框委托 Qt 自定义Checkbox和QColorDialog 颜色调试框委托 Qt 自定义Checkbox和QColorDialog 颜色调试框委托
QSS 自定义QCheckBox
有何不为
06-10 622
QSS - QCheckBox Style Sheet
自定义QCheckBox控件样式实例教程
TechWhizZ的博客
08-23 773
其中，QCheckBox::indicator表示复选框的指示器，未选中状态下的样式使用checkbox_unchecked.png图片，选中状态下的样式使用checkbox_checked.png图片。方法是在Qt Creator中右击项目名称，在弹出的菜单中选择“添加新文件”，然后选择“Qt”->“Qt Resource File”，命名为resource.qrc，并在该文件夹下添加名为“images”的子文件夹，将两张图片放入该文件夹中。至此，我们成功自定义了QCheckBox的样式。
QT 实现自定义CheckBox
希望能帮助大家，希望大家多多支持，你们的支持是我前进的动力。
10-21 434
原理：使用Qt的QPropertyAnimation动画类，这里简单来说就是根据自定义的一个数值N，举个例子：随着动画的结束，数值N从0到100，根据这个数值N，在我们的绘制图像void paintEvent(QPaintEvent *) override;事件中绘制图形。首先做一个基类：重写了鼠标进入、离开事件，主要是改变边框的圆角；然后选中的时候，根据动画的进度在paintEvent中来绘制里面矩形的大小。
qt自定义控件样式06-QCheckBox
darkGer的博客
06-19 1186
注释只为解释，qss语法并不能直接这样写，美化控件时，下面的所有选项并不需要全部进行设置，自行选择 一、QCheckBox QCheckBox { spacing: 5px; } QCheckBox::indicator//指示器子控件 { width: 13px; height: 13px; } QCheckBox::indicator:unchecked //指示器未选上 { image: url(:/images/checkbox_unchecked.png);
QTableView显示自定义CheckBox
08-26
QTableView显示自定义CheckBox, 开发环境macos 10.13.1 Qt 5.9.1
QTableView添加自定义QCheckBox
yhc166188的博客
05-30 1607
使用的是自定义委托的方式，重写了panit函数和editorEvent函数实现指定列内嵌复选框，单击实现选中状态切换主要思路：paint函数里进行复选框的绘制，并实时读取模型数据显示状态，editorEvent函数里判断单元格点击情况进行处理。源代码如下：checkdelegate.h#ifndef CHECKDELEGATE_H  #define CHECKDELEGATE_H    #incl...
qt-qss之QCheckbox样式
热门推荐
kbq的博客
07-17 1万+
一、前言 QSlider样式 二、环境 qt5.7 window8 三、正文 效果： qss： QCheckBox{ border: none;/*最外层边框*/ } QCheckBox::indicator{/*选择框尺寸*/ background-color: rgba(255, 255, 255, 0); border: 0px solid #b1b1b1; width: 30px; height: 30px; } QCheckBox:...
用图片自定义QCheckBox样式
chenyijun的专栏
03-28 5420
https://blog.youkuaiyun.com/yueashuxia/article/details/52366355 记录一下大致的过程，避免将来忘记。 实现环境：Qt Creator 3.2.1 Based on Qt5.3.2 (GCC 4.9.2, 32bit) 项目类型：Qt Widgets Application 1.首先在项目中添加Qt资源文件，命名为resource...
QCheckBox样式表
C++初学者
11-28 1万+
QCheckBox { Color:red; Background-color:rgb(0,0,0); } //选择框 QCheckBox::indicator { Width:13px; Height:13px; } //未选中状态的选择框 QCheckBox::indicator:unchecked { } QCheckBox::indicator:unche...
Qt自定义CheckBox开关
FWY0x7CF的博客
03-21 553
Qt自定义CheckBox开关
Qt/QML学习-自定义CheckBox
QT、QML
07-15 269
Qt/QML学习-自定义CheckBox
qt qcheckbox 自定义勾子颜色 样式表
03-29
<think>嗯，用户想了解如何在Qt中自定义QCheckBox的勾选颜色，使用样式表。首先，我得回忆一下Qt的样式表机制，尤其是如何应用样式到特定的部件上。QCheckBox属于可勾选的控件，默认的样式可能不符合用户的界面设计需求，所以需要自定义。 首先，我需要确定QCheckBox的不同状态，比如未选中、选中、悬停、禁用等。用户可能希望在不同状态下显示不同的颜色。然后，样式表中应该使用::indicator子控件来修改勾选框的外观。记得在Qt中，子控件的样式需要正确指定，否则可能不生效。 接下来，颜色设置部分。用户想要改变勾子的颜色，可能需要用到image或者background属性，但勾子本身可能是一个图标，使用image可能更直接。不过，可能更灵活的方式是使用border和background来绘制自定义的勾选框，然后用勾选时的背景色或图像来显示颜色变化。 另外，需要注意的是，当QCheckBox被选中时，::indicator的子控件状态会改变，比如checked、unchecked。这时候可以通过设置不同的样式来响应状态变化。比如，当选中时，设置背景色为特定颜色，并添加一个勾的符号。 可能还需要考虑不同平台下的表现，确保样式表在不同系统下都能正确应用。此外，使用伪状态如:hover、:disabled来增强用户体验，让用户在不同交互状态下有视觉反馈。 然后，我应该考虑如何编写具体的样式表代码。比如，设置indicator的宽度和高度，调整边框，背景颜色，以及在选中时的变化。可能需要使用勾号的Unicode字符，或者通过设置图像来替换默认的勾号。但使用字符的话，可能需要设置字体颜色来改变勾的颜色，这样更简单。 例如，当选中时，设置背景颜色为蓝色，勾的颜色为白色。这样，可以通过color属性来改变勾号的颜色，前提是勾号是通过字体绘制的。或者，使用image属性加载一个SVG图像，并根据状态改变颜色。 测试过程中，可能会遇到勾号颜色不改变的问题，这时候需要检查是否正确地应用了样式表，是否覆盖了所有必要的状态，或者是否有其他样式冲突。此外，使用spacing属性调整文本和勾选框的间距，提升美观度。 最后，可能需要提供一个完整的示例代码，展示如何将样式表应用到QCheckBox上，并说明各个属性的作用，帮助用户理解并自行调整参数。同时提醒用户注意样式表的继承和优先级问题，避免影响其他部件。</think>在 Qt 中通过样式表自定义 QCheckBox 的勾选颜色，可以通过以下步骤实现： ### 一、基本语法结构 ```cpp QCheckBox::indicator { width: 20px; height: 20px; border: 2px solid gray; // 边框样式 } /* 未选中状态 */ QCheckBox::indicator:unchecked { background: white; // 背景色 } /* 选中状态 */ QCheckBox::indicator:checked { background: #2196F3; // 选中时背景色 image: url(:/checkmark.svg); // 可选的勾选图标 border-color: #1565C0; // 选中时边框颜色 } /* 禁用状态 */ QCheckBox::indicator:disabled { background: #BDBDBD; // 禁用时背景色 } ``` ### 二、关键属性说明 1. **修改勾选颜色**： ```css QCheckBox::indicator:checked { color: #FF4081; /* 直接控制勾选符号颜色 */ image: url(path/to/custom-checkmark.png); /* 使用自定义图标 */ } ``` 2. **多状态组合**： ```css /* 悬停状态 */ QCheckBox::indicator:hover { border: 2px solid #64B5F6; } /* 按下未选中状态 */ QCheckBox::indicator:pressed:unchecked { background: #E3F2FD; } ``` ### 三、完整示例代码 ```cpp // C++ 中设置样式表 checkbox->setStyleSheet(R"( QCheckBox { spacing: 8px; /* 文字与勾选框间距 */ font-size: 14px; } QCheckBox::indicator { width: 20px; height: 20px; border-radius: 4px; border: 2px solid #757575; } QCheckBox::indicator:checked { background-color: #2196F3; border-color: #1565C0; image: url(:/icons/check_white.svg); /* SVG 图标颜色由文件自身定义 */ } QCheckBox::indicator:disabled { background-color: #BDBDBD; border-color: #616161; } )"); ``` ### 四、注意事项 1. **图标颜色控制**： - 使用 SVG 图标时可通过修改 SVG 文件内部的 `fill` 属性控制颜色 - 使用 PNG 图标需预先生成不同颜色的版本 2. **高 DPI 适配**： ```css QCheckBox::indicator { width: 1.2em; /* 使用相对单位 */ height: 1.2em; } ``` 3. **动画效果扩展**（需要结合 QSS + QPropertyAnimation）： ```cpp // 在样式表中启用过渡效果 QCheckBox::indicator { transition: background-color 0.3s, border-color 0.3s; } ``` 建议通过 Qt Designer 实时预览样式效果，可通过 `Ctrl+R` 快速刷新样式表修改。对于复杂需求，可以结合 `QProxyStyle` 实现更底层的绘制控制。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

草上爬

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值