ToB企服应用市场:ToB评测及商务社交产业平台

标题: 【VS Code 与 Qt6】QCheckBox的图标为什么不会切换？ [打印本页]
作者: 郭卫东    时间: 2023-6-3 19:05
标题: 【VS Code 与 Qt6】QCheckBox的图标为什么不会切换？
本篇专门扯一下有关 QCheckBox 组件的一个问题。老周不水字数，直接上程序，你看了就明白。
  1. #include <QApplication>
  2. #include <QWidget>
  3. #include <QPushButton>
  4. #include <QCheckBox>
  5. #include <QVBoxLayout>
  6. #include <QIcon>
  8. int main(int argc, char **argv)
  9. {
  10.     QApplication app(argc, argv);
  11.     // 最平庸的窗口
  12.     QWidget window;
  13.     window.setWindowTitle("看看这是？");
  14.     window.setGeometry(/*坐标*/600, 450, /*大小*/280, 170);
  15.     // 布局
  16.     QVBoxLayout *layout = new QVBoxLayout;
  17.     window.setLayout(layout);
  18.     // 控件列表
  19.     QCheckBox *cb = new QCheckBox(&window);
  20.     cb -> setText("看，左边的图标不会变");
  21.     layout -> addWidget(cb);
  22.     QPushButton *btn = new QPushButton(&window);
  23.     btn->setText("看，左边的图标会变");
  24.     // 让按钮支持check操作
  25.     btn->setCheckable(true);
  26.     layout->addWidget(btn);
  27.     // 图标
  28.     QIcon icon;
  29.     // 第一个图，当checked的时候显示
  30.     icon.addFile("1.png", QSize(), QIcon::Normal, QIcon::On);
  31.     // 第二个图，当unchecked的时候显示
  32.     icon.addFile("2.png", QSize(), QIcon::Normal, QIcon::Off);
  33.     // 应用图标
  34.     cb->setIcon(icon);
  35.     btn->setIcon(icon);
  36.    
  37.     // 显示窗口
  38.     window.show();
  40.     return QApplication::exec();
  41. }
复制代码
QCheckBox、QRadioButton、QPushButton 都是 QAbstractButton 的子类，所以这几个家伙都归属于按钮组件。在 QAbstractButton 类中已定义有 checkable 属性，表示按钮是否支持 check 操作。这种按钮就类似于现实世界中的自锁按钮——按一下【开】，再按一下【关】。而普通的按钮是无状态记忆的，按下去+弹起来为一个周期，称为 Click。
由于是派生关系，所以 QCheckBox 和 QPushButton 类都会继承 check 功能的支持，只是 QCheckBox 默认是打开这项功能的。QPushButton 类默认不能 check，所以得调用 setCheckable 方法手动打开功能。
  1.    btn->setCheckable(true);
复制代码
下面重点扯扯 QIcon 这货，看名识义，你能猜到它表示的是图标。QIcon 类可以根据不同状态添加多个图标。老周这个例子是添加了两个 PNG 图标。懒得生成什么鬼 Qrc 资源了，直接把图片文件复制到程序可执行文件所在的目录就完事了。比如，build/Debug，只要和可执行文件在同一个目录就行，方便相对路径引用。
  1.     QIcon icon;
  2.     // 第一个图，当checked的时候显示
  3.     icon.addFile("1.png", QSize(), QIcon::Normal, QIcon::On);
  4.     // 第二个图，当unchecked的时候显示
  5.     icon.addFile("2.png", QSize(), QIcon::Normal, QIcon::Off);
复制代码
这里涉及到 QIcon 类定义的两枚举：
A、Mode：
1）Normal —— 组件的正常状态；
2）Disbaled —— 被禁用，比如按钮不能点击；
3）Active —— 其实和 Normal 差不多，只是多了一条：正在与用户交互。比如活动窗口，获得焦点的按钮，获得焦点的输入框等；
4）Selected —— 这个有些奇葩，一般在子项对象起作用。比如，ListView 视图的子项被选中时。
B、State：
1）On —— 状态“开”。比如 CheckBox 处于 checked 状态；
2）Off —— 状态“关”。如 CheckBox 的 Unchecked 状态。
回到咱们的代码。这两个图标的区别就在 State 的值不同，当 On 时显示 1.png；当状态为 Off 时显示 2.png。
  1.     icon.addFile("1.png", QSize(), QIcon::Normal, QIcon::On);
  2.     icon.addFile("2.png", QSize(), QIcon::Normal, QIcon::Off);
复制代码
addFile 的第一个参数是文件路径，第二个参数指定图标的大小，这里用 QSize 类的默认构造函数，即宽和高都是 -1，这样图标会根据样式获取默认大小。
运行程序，咱们测试下。如下图所示，这是初始状态，上下两个组件都没有 check。

然后，咱们依次点击它们，让这两个组件都处于 checked 状态。

咱们看到：QPushButton 切换状态后图标也跟着变了，但是 QCheckBox 一点动静都没有。这 NM 是怎么回事？
原来，QPushButton 的默认样式中，在获取图标时，会根据 checked 状态来提取 On 或 Off 相关的图标。
  1. case CE_PushButtonLabel:
  2.         if (const QStyleOptionButton *button = qstyleoption_cast<const QStyleOptionButton *>(opt)) {
  3.             ……
  5.             if (!button->icon.isNull()) {
  6.                 //Center both icon and text
  7.                 QIcon::Mode mode = button->state & State_Enabled ? QIcon::Normal : QIcon::Disabled;
  8.                 if (mode == QIcon::Normal && button->state & State_HasFocus)
  9.                     mode = QIcon::Active;
  10.                 QIcon::State state = QIcon::Off;
  11.                 if (button->state & State_On)
  12.                     state = QIcon::On;
  14.                 ……
  15.         break;
复制代码
再看看 QCheckBox 的样式，发现这厮在获取图标时是不考虑 On 或 Off 状态的。
  1.     case CE_RadioButtonLabel:
  2.     case CE_CheckBoxLabel:
  3.         ……
  4.             if (!btn->icon.isNull()) {
  5.                 pix = btn->icon.pixmap(btn->iconSize, p->device()->devicePixelRatio(), btn->state & State_Enabled ? QIcon::Normal : QIcon::Disabled);
  6.                 ……
  7.             }
  8.         }
  9.         break;
复制代码
为什么 QCheckBox 的图标不会随着 check 状态改变，这下找到答案了。
不过，人家 Qt 这样设计也没毛病的。毕竟 QCheckBox 前面有个勾勾，已经可以向用户指示状态了，就没必要换图标了。
那么，这个用 QSS （Qt 样式表）能解决吗？Qt 说了，目前 QStyle 和 QSS 是不兼容的，以后的版本可能会实现。估计也是说说而已。
所以，有效的解决方案时自己写个 Style 类，不用覆盖所有组件的样式，只要覆盖 CE_CheckBoxLabel 部分，自己手动绘制图标和文本就行了。如果你想在 QRadioButton 组件中也用上，当然得同时覆盖 CE_RadioButtonLabel 部分。
  1.     case CE_RadioButtonLabel:
  2.     case CE_CheckBoxLabel:
  3.         ……
  4.         break;
复制代码
XXXLabel 指的就是绘制此组件的标签——即文本（或文本+图标）部分，前文的 CE_PushButtonLabel 常量也是此意，绘制 QPushButton 组件的标签部分。
要部分覆盖样式，应当从 QProxyStyle 类派生。这里只需要重写 drawControl 方法就够了，它的签名为：
  1. virtual void drawControl(ControlElement element, const QStyleOption *opt, QPainter *p, const QWidget *w = nullptr) const = 0;
复制代码
这方法的原始声明是在 QStyle 类中，而且是纯虚函数，派生类必须重写它。QCommonStyle 和 QProxyStyle 类都重写过。如今，咱们要自定义样式，也要重写它。
element 参数表示当前要绘制组件（控件）的哪个部分，例如，CE_PushButtonLabel 表示要画按钮的标签部分，CE_ProgressBarLabel 表示要画进度条的标签部分。
opt 参数是 QStyleOption 的子类，提供绘制样式所需的数据，如按钮上显示啥文本，组件的大小，组件是否处于禁用状态。
p 是 QPainter，用来绘图。
w 是 QWidget 或其子类，就是引用相关的组件对象，许多时候咱们可以不管。有时候可能要从组件上获取额外的数据时用到。
 
下面代码重写 QCheckBox 的标签绘制过程。
  1. class MyStyle : public QProxyStyle
  2. {
  3.     Q_OBJECT
  4. public:
  5.     void drawControl(ControlElement element, const QStyleOption *option, QPainter *painter, const QWidget *widget = nullptr) const override
  6.     {
  7.         if (element == CE_CheckBoxLabel)
  8.         {
  9.             const QStyleOptionButton *btn = qstyleoption_cast<const QStyleOptionButton *>(option);
  10.             QRect rect = btn->rect;
  11.             qDebug() << "可用大小：" << rect;
  12.             // 有图标
  13.             if (btn->icon.isNull() == false)
  14.             {
  15.                 // 组件是否在可用状态？
  16.                 QIcon::Mode mode = btn->state & State_Enabled ? QIcon::Normal : QIcon::Disabled;
  17.                 // 组件是否已经 checked ？
  18.                 QIcon::State state = btn->state & State_On ? QIcon::On : QIcon::Off;
  19.                 // 显示缩放因数
  20.                 qreal pRatio = painter->device()->devicePixelRatio();
  21.                 // 获取图标
  22.                 QPixmap theIcon = btn->icon.pixmap(
  23.                     btn->iconSize,
  24.                     pRatio,
  25.                     mode,
  26.                     state);
  27.                 qDebug() << "图像原始尺寸：" << theIcon.width() << ", " << theIcon.height();
  28.                 // 这里得换算一下
  29.                 int iconWidth = theIcon.width() / pRatio;
  30.                 int iconHeight = theIcon.height() / pRatio;
  31.                 qDebug() << "缩放后图标大小：" << iconWidth << ", " << iconHeight;
  32.                 // 计算图标的原点
  33.                 int iconX = rect.x();
  34.                 int iconY = (rect.height() - iconHeight) / 2 - 1;
  35.                 // 画图标
  36.                 painter->drawPixmap(
  37.                     QRect(iconX, iconY, iconWidth, iconHeight),
  38.                     theIcon);
  39.                 // 可用空间减小一下（因为图标占了一些空间）
  40.                   int iconWidth = theIcon.width() / pRatio;
  41.     int iconHeight = theIcon.height() / pRatio;
  42.             }
  43.             // 有没有文本？
  44.             if (!btn->text.isNull())
  45.             {
  46.                 // 水平：左对齐；垂直：居中对齐
  47.                 auto alig = Qt::AlignLeft | Qt::AlignVCenter;
  48.                 // 算算文本所占空间
  49.                  rect.adjust(iconWidth + 2, 0, 0, 0);
  50.                 painter->drawText(txtRect, alig, btn->text);
  51.             }
  52.             return;
  53.         }
  54.         // 其他的保持默认，交给基类去干就行了
  55.         QProxyStyle::drawControl(element, option, painter, widget);
  56.     }
  57. };
复制代码
假设图标的默认尺寸是 16×16，但要是显示比例是 125%，即 16×1.25 = 20 ==> 20×20。这个显示比例可在系统设置里调整。

如果你不希望图标的大小受显示比例干扰，那么需要注意这个比例值了。比如，老周这里设置的是 125%，那么，从 QIcon 中获取到的 QPixmap 对象的大小是 20 像素。所以，要让它还原为 16 像素，就就除以显示比例（devicePixelRatio）。
  1.    qreal pRatio = painter->device()->devicePixelRatio();
复制代码
当然了，如果你希望图标也跟着缩放，那就不用换算了。
在绘制完图标后，要用 adjust 方法把矩形对象的 X 坐标向右移，因为图标占了亿点空间，文本只能在图标右边绘制。
  1.     int iconWidth = theIcon.width() / pRatio;
  2.     int iconHeight = theIcon.height() / pRatio;
复制代码
四个参数分别指定矩形对角线上两个点的坐标变化量。注意是变化量，不是坐标值。比如，adjust( 10, 15, -28, 5 )，意思是：
左上角：X 坐标 +10，Y 坐标 +15；
右下角：X 坐标 -28，Y 坐标 +5。
painter->fontMetrics().boundingRect 方法很好用的，它可以计算出要画的文本所占的空间（QRect 对象，用矩形描述）。
  1.   rect.adjust(iconWidth + 2, 0, 0, 0);
复制代码
然后，写个自定义 QWidget 类，作为顶层窗口，试试自定义样式。
  1. QRect txtRect = painter->fontMetrics().boundingRect(rect, alig, btn->text);
复制代码
由于这个自定义样式只是针对 QCheckBox 组件，没有必要应用到 QApplication 上，直接用在 QCheckBox上就好了。哦，不要用在 QWidget 实例上，不起作用的。原因请看：
  1. class MyWindow : public QWidget
  2. {
  3.     Q_OBJECT
  5. public:
  6.     explicit MyWindow()
  7.         : QWidget(nullptr)
  8.     {
  9.         setWindowTitle("Demo");
  10.         resize(200, 80);
  11.         // 布局
  12.         m_layout = new QVBoxLayout();
  13.         setLayout(m_layout);
  14.         m_ck1 = new QCheckBox("选项一", this);
  15.         m_ck2 = new QCheckBox("选项二", this);
  16.         // 给这俩checkbox弄弄样式
  17.         auto style = new MyStyle;
  18.         // 把样式对象纳入到Qt对象树中
  19.         // 内存清理时会自动打扫，防止泄漏
  20.         style->setParent(this);
  21.         m_ck1->setStyle(style);
  22.         m_ck2->setStyle(style);
  23.         m_layout->addWidget(m_ck1);
  24.         m_layout->addWidget(m_ck2);
  25.         // 设置图标
  26.         QIcon icon;
  27.         icon.addFile("1.png", QSize(), QIcon::Normal, QIcon::On);
  28.         icon.addFile("2.png", QSize(), QIcon::Normal, QIcon::Off);
  29.         m_ck1->setIcon(icon);
  30.         m_ck2->setIcon(icon);
  31.     }
  33. private:
  34.     QVBoxLayout *m_layout;
  35.     QCheckBox *m_ck1, *m_ck2;
  36. };
复制代码
QWidget 类对 paint 事件是没做任何处理的，所以不会触发样式类中的各类绘制方法，除非你重写 paintEvent 方法，手动触发。所以说，咱们直接把样式应用在 QCheckBox 就很合适，QCheckBox 类是处理 paintEvent 的。
  1. void QWidget::paintEvent(QPaintEvent *)
  2. {
  3. }
复制代码
在实现自定义样式时，咱们在 drawControl 方法中读到的数据就是这么来的。
写上 main 函数，试一下水。
  1. void QCheckBox::paintEvent(QPaintEvent *)
  2. {
  3.     QStylePainter p(this);
  4.     QStyleOptionButton opt;
  5.     initStyleOption(&opt);
  6.     p.drawControl(QStyle::CE_CheckBox, opt);
  7. }
  9. // QStyleOptionButton 的数据在这里收集
  10. void QCheckBox::initStyleOption(QStyleOptionButton *option) const
  11. {
  12.     if (!option)
  13.         return;
  14.     Q_D(const QCheckBox);
  15.     // 从当前QCheckBox实例提取基本数据
  16.     option->initFrom(this);
  17.     // 处于被鼠标按下状态
  18.     if (d->down)
  19.         option->state |= QStyle::State_Sunken;
  20.    // 除了 checked 和 unchecked 外，还存在第三状态
  21.    // 一种未明确状态，介于 checked 与 unchecked 之间
  22.    if (d->tristate && d->noChange)
  23.         option->state |= QStyle::State_NoChange;
  24.     else
  25.         option->state |= d->checked ? QStyle::State_On : QStyle::State_Off;
  26.     if (testAttribute(Qt::WA_Hover) && underMouse()) {
  27.         option->state.setFlag(QStyle::State_MouseOver, d->hovering);
  28.     }
  29.     // 显示的文本
  30.     option->text = d->text;
  31.     // 显示的图标
  32.     option->icon = d->icon;
  33.     // 图标的大小
  34.     option->iconSize = iconSize();
  35. }
复制代码
运行，验证。

这回有效果了，图标会自动切换了。是咱们想要的。
顺便提一句，如果你自定义的类，如上面的 MyStyle，MyWindow 类，这些 QObject 的子类，或包含 Q_OBJECT 宏的类。你如果没有在头文件中定义，而是像老周刚才那样，直接写在 cpp 文件中，那么，在类定义的代码后面要加一行（假设代码文件是 app.cpp）：
  1. int main(int argc, char **argv)
  2. {
  3.     QApplication app(argc, argv);
  4.     MyWindow wind;
  5.     wind.show();
  6.     return QApplication::exec();
  7. }
复制代码
这个与 MOC（Meta Object Compiler） 功能是对应的，Qt 定义了许多奇葩语法，这些不是标准 C++ 里面的，在正式编译之前，要把这些奇葩语法还原为标准 C++ 语法，所以才会有生成 xxx.moc 文件。moc 文件其实是C++代码，同时还生成一个 xxx.moc.d 文件，里面是源代码文件引用到的头文件列表。
 
======================================================
最后，老周分享一个 VS Code 加背景图的技巧。由于 VS Code 的UI是HTML + CSS弄的，所以，通过修改 CSS 文件可以给它加个背景图。你如果嫌麻烦，可以安装 background 插件，直接配置。background - Visual Studio Marketplace
当然，不想用插件，就自己改。网上也有不少教程，不过，老周这里重点说一下文件路径格式，因为网上说的那些方法不适合新版本。
在VS Code 所在目录（不管你是安装版还是便携版）resources \ app \ out \ vs \ workbench 下面，你会看到一个名为 workbench.desktop.main.css 的文件。这个文件里就是 VS Code 主界面的样式表了。如果怕搞坏了，可以备份一个，然后再改。把这个文件直接扔进 VS Code 里面编辑，可以将其格式化一下，这样好看亿点。
自定义背景图改 body 元素的样式就好了，这样图片可以覆盖整窗口。改其他地方效果都不好，而且有些背景改了也没用，VS Code 运行的时候会被主题参数覆盖。因此，改 body 的样式是目前最方便的方法。你可以直接在 CSS 文件末尾直接写上 body 样式。也可以通过查找“body {” 找到默认的样式，直接在后面追加属性。
  1. class MyStyle : public QProxyStyle
  2. {
  3.     ……
  4. };
  6. class MyWindow : public QWidget
  7. {
  8.     ……
  9. };
  11. #include "app.moc"
  13. int main(int argc, char **argv)
  14. {
  15.     ……
  16. }
复制代码
你直接照抄就行，注意 background-image 的地方改成你自己的图片路径。网上的教程用的是 file:///c:/users/xxx/pictures/ 这样的路径，这个新版本不支持的，协议要改为 vscode-file:，然后路径要使用 vscode-app/ 前缀，之后才是图片的路径。
推荐选一张尺寸大一点的图片，这样既可以看得清楚，也可以覆盖整个窗口。opacity 属性设置背景的透明，这个不要弄成 100%，这样全不透明，看不到背景图片了。也不推荐低于 70%，因为太透明了，代码都看不清楚了，写代码容易近视。最好选 85 - 90% 之间，即 0.85 到 1.0。
老周知道，很多大伙伴都喜欢放动画人物，尤其是猛男们都喜欢放一些魔法少女（水手服的就……，小时候觉得不太好看，现在也觉得不太好看，当然，仅代表个人看法）。为了表示对国产动画的支持，尤其是国产魔法少女系列，老周推荐这个：

B 站上面不少猛男喜欢美雪，其实老周也喜欢，所有女生该有的优点她都有，学霸小淑女。
奥飞可能玩具卖得不太好，最近 15 周年的活动还搞得挺带劲。上次去电器城看空调，广告大屏幕里还放这个，超市里也放。
国产动画起步晚，老周小时候看的 99.9% 是日本的，国产的只看过《哪吒》。在为数不多的国产动画（特别魔法少女）里面，真的算是起步就是巅峰了。但说句难听的，衰败也很快，也就是真人版 + 前三部还可以，后面真的不行了，花里花哨，主题也太水。大电影嘛，反正老周不喜欢，都是给那些什么鬼女团做广告的，特效也是敷衍。
有人要说了，动画就是子供向的，就那样了，还要求什么。那可不，以前一些给小娃娃看的动画也设计得很好的，主题思想也明确，情节略带些深度。就像《奈克瑟斯奥特曼》一样，那可不一定小朋友就能看懂的。作为文艺作品，动画只是一样表现形式，核心价值观和思想主题也必须体现，不然还有观赏的意义吗？想一想迪迦、麦克斯、盖亚里面，有几集小时候都看不懂的。
 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4