【VS Code 与 Qt6】QCheckBox的图标为什么不会切换?

vs,code,qt6,qcheckbox,图标,为什么,不会,切换 · 浏览次数 : 193

小编点评

The provided code explains how to implement a custom style for the QCheckBox component in Qt. Here's a summary of the key points: **Problem:** - QCheckBox does not support custom styles. - Applying styles directly on QWidget is ineffective. **Solution:** - Apply the style directly to the QCheckBox component using `setStyles()` method. **Implementation:** - Define a custom style using `QStylePainter` object. - Set the style options for various states (checked, unchecked, disabled). - Use `drawControl()` method to apply the style to the checkbox. **Additional Information:** - The code also provides a solution for adding a background image to VS Code's UI. - The background image should be placed in the `resources/workbench.desktop.main.css` file. - Use `background-image` property with `vscode-file:` protocol to specify the image path. **Tips:** - Choose a background image size that covers the entire window. - Adjust opacity and background image repeat properties to achieve the desired effect. - Refer to the provided code for specific details on file paths and background image usage.

正文

本篇专门扯一下有关 QCheckBox 组件的一个问题。老周不水字数,直接上程序,你看了就明白。

#include <QApplication>
#include <QWidget>
#include <QPushButton>
#include <QCheckBox>
#include <QVBoxLayout>
#include <QIcon>

int main(int argc, char **argv)
{
    QApplication app(argc, argv);
    // 最平庸的窗口
    QWidget window;
    window.setWindowTitle("看看这是?");
    window.setGeometry(/*坐标*/600, 450, /*大小*/280, 170);
    // 布局
    QVBoxLayout *layout = new QVBoxLayout;
    window.setLayout(layout);
    // 控件列表
    QCheckBox *cb = new QCheckBox(&window);
    cb -> setText("看,左边的图标不会变");
    layout -> addWidget(cb);
    QPushButton *btn = new QPushButton(&window);
    btn->setText("看,左边的图标会变");
    // 让按钮支持check操作
    btn->setCheckable(true);
    layout->addWidget(btn);
    // 图标
    QIcon icon;
    // 第一个图,当checked的时候显示
    icon.addFile("1.png", QSize(), QIcon::Normal, QIcon::On);
    // 第二个图,当unchecked的时候显示
    icon.addFile("2.png", QSize(), QIcon::Normal, QIcon::Off);
    // 应用图标
    cb->setIcon(icon);
    btn->setIcon(icon);
    
    // 显示窗口
    window.show();

    return QApplication::exec();
}

QCheckBox、QRadioButton、QPushButton 都是 QAbstractButton 的子类,所以这几个家伙都归属于按钮组件。在 QAbstractButton 类中已定义有 checkable 属性,表示按钮是否支持 check 操作。这种按钮就类似于现实世界中的自锁按钮——按一下【开】,再按一下【关】。而普通的按钮是无状态记忆的,按下去+弹起来为一个周期,称为 Click。

由于是派生关系,所以 QCheckBox 和 QPushButton 类都会继承 check 功能的支持,只是 QCheckBox 默认是打开这项功能的。QPushButton 类默认不能 check,所以得调用 setCheckable 方法手动打开功能。

   btn->setCheckable(true);

下面重点扯扯 QIcon 这货,看名识义,你能猜到它表示的是图标。QIcon 类可以根据不同状态添加多个图标。老周这个例子是添加了两个 PNG 图标。懒得生成什么鬼 Qrc 资源了,直接把图片文件复制到程序可执行文件所在的目录就完事了。比如,build/Debug,只要和可执行文件在同一个目录就行,方便相对路径引用。

    QIcon icon;
    // 第一个图,当checked的时候显示
    icon.addFile("1.png", QSize(), QIcon::Normal, QIcon::On);
    // 第二个图,当unchecked的时候显示
    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。

    icon.addFile("1.png", QSize(), QIcon::Normal, QIcon::On);
    icon.addFile("2.png", QSize(), QIcon::Normal, QIcon::Off);

addFile 的第一个参数是文件路径,第二个参数指定图标的大小,这里用 QSize 类的默认构造函数,即宽和高都是 -1,这样图标会根据样式获取默认大小。

运行程序,咱们测试下。如下图所示,这是初始状态,上下两个组件都没有 check。

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

咱们看到:QPushButton 切换状态后图标也跟着变了,但是 QCheckBox 一点动静都没有。这 NM 是怎么回事?

原来,QPushButton 的默认样式中,在获取图标时,会根据 checked 状态来提取 On 或 Off 相关的图标。

 case CE_PushButtonLabel:
        if (const QStyleOptionButton *button = qstyleoption_cast<const QStyleOptionButton *>(opt)) {
            ……

            if (!button->icon.isNull()) {
                //Center both icon and text
                QIcon::Mode mode = button->state & State_Enabled ? QIcon::Normal : QIcon::Disabled;
                if (mode == QIcon::Normal && button->state & State_HasFocus)
                    mode = QIcon::Active;
                QIcon::State state = QIcon::Off;
                if (button->state & State_On)
                    state = QIcon::On;

                ……
        break;

再看看 QCheckBox 的样式,发现这厮在获取图标时是不考虑 On 或 Off 状态的。

    case CE_RadioButtonLabel:
    case CE_CheckBoxLabel:
        ……
            if (!btn->icon.isNull()) {
                pix = btn->icon.pixmap(btn->iconSize, p->device()->devicePixelRatio(), btn->state & State_Enabled ? QIcon::Normal : QIcon::Disabled);
                ……
            }
        }
        break;

为什么 QCheckBox 的图标不会随着 check 状态改变,这下找到答案了。

不过,人家 Qt 这样设计也没毛病的。毕竟 QCheckBox 前面有个勾勾,已经可以向用户指示状态了,就没必要换图标了。

那么,这个用 QSS (Qt 样式表)能解决吗?Qt 说了,目前 QStyle 和 QSS 是不兼容的,以后的版本可能会实现。估计也是说说而已。

所以,有效的解决方案时自己写个 Style 类,不用覆盖所有组件的样式,只要覆盖 CE_CheckBoxLabel 部分,自己手动绘制图标和文本就行了。如果你想在 QRadioButton 组件中也用上,当然得同时覆盖 CE_RadioButtonLabel 部分。

    case CE_RadioButtonLabel:
    case CE_CheckBoxLabel:
        ……
        break;

XXXLabel 指的就是绘制此组件的标签——即文本(或文本+图标)部分,前文的 CE_PushButtonLabel 常量也是此意,绘制 QPushButton 组件的标签部分。

要部分覆盖样式,应当从 QProxyStyle 类派生。这里只需要重写 drawControl 方法就够了,它的签名为:

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 的标签绘制过程。

class MyStyle : public QProxyStyle
{
    Q_OBJECT
public:
    void drawControl(ControlElement element, const QStyleOption *option, QPainter *painter, const QWidget *widget = nullptr) const override
    {
        if (element == CE_CheckBoxLabel)
        {
            const QStyleOptionButton *btn = qstyleoption_cast<const QStyleOptionButton *>(option);
            QRect rect = btn->rect;
            qDebug() << "可用大小:" << rect;
            // 有图标
            if (btn->icon.isNull() == false)
            {
                // 组件是否在可用状态?
                QIcon::Mode mode = btn->state & State_Enabled ? QIcon::Normal : QIcon::Disabled;
                // 组件是否已经 checked ?
                QIcon::State state = btn->state & State_On ? QIcon::On : QIcon::Off;
                // 显示缩放因数
                qreal pRatio = painter->device()->devicePixelRatio();
                // 获取图标
                QPixmap theIcon = btn->icon.pixmap(
                    btn->iconSize,
                    pRatio,
                    mode,
                    state);
                qDebug() << "图像原始尺寸:" << theIcon.width() << ", " << theIcon.height();
                // 这里得换算一下
                int iconWidth = theIcon.width() / pRatio;
                int iconHeight = theIcon.height() / pRatio;
                qDebug() << "缩放后图标大小:" << iconWidth << ", " << iconHeight;
                // 计算图标的原点
                int iconX = rect.x();
                int iconY = (rect.height() - iconHeight) / 2 - 1;
                // 画图标
                painter->drawPixmap(
                    QRect(iconX, iconY, iconWidth, iconHeight),
                    theIcon);
                // 可用空间减小一下(因为图标占了一些空间)
                rect.adjust(iconWidth + 2, 0, 0, 0);
            }
            // 有没有文本?
            if (!btn->text.isNull())
            {
                // 水平:左对齐;垂直:居中对齐
                auto alig = Qt::AlignLeft | Qt::AlignVCenter;
                // 算算文本所占空间
                QRect txtRect = painter->fontMetrics().boundingRect(rect, alig, btn->text);
                painter->drawText(txtRect, alig, btn->text);
            }
            return;
        }
        // 其他的保持默认,交给基类去干就行了
        QProxyStyle::drawControl(element, option, painter, widget);
    }
};

这里咱们只关心 CE_CheckBoxLabel,其他值都交给基类处理。在计算图标尺寸的时候,涉及到显示缩放比例。

   qreal pRatio = painter->device()->devicePixelRatio();

假设图标的默认尺寸是 16×16,但要是显示比例是 125%,即 16×1.25 = 20 ==> 20×20。这个显示比例可在系统设置里调整。

如果你不希望图标的大小受显示比例干扰,那么需要注意这个比例值了。比如,老周这里设置的是 125%,那么,从 QIcon 中获取到的 QPixmap 对象的大小是 20 像素。所以,要让它还原为 16 像素,就就除以显示比例(devicePixelRatio)。

    int iconWidth = theIcon.width() / pRatio;
    int iconHeight = theIcon.height() / pRatio;

当然了,如果你希望图标也跟着缩放,那就不用换算了。

在绘制完图标后,要用 adjust 方法把矩形对象的 X 坐标向右移,因为图标占了亿点空间,文本只能在图标右边绘制。

  rect.adjust(iconWidth + 2, 0, 0, 0);

四个参数分别指定矩形对角线上两个点的坐标变化量。注意是变化量,不是坐标值。比如,adjust( 10, 15, -28, 5 ),意思是:

左上角:X 坐标 +10,Y 坐标 +15;

右下角:X 坐标 -28,Y 坐标 +5。

painter->fontMetrics().boundingRect 方法很好用的,它可以计算出要画的文本所占的空间(QRect 对象,用矩形描述)。
 QRect txtRect = painter->fontMetrics().boundingRect(rect, alig, btn->text);

然后,写个自定义 QWidget 类,作为顶层窗口,试试自定义样式。

class MyWindow : public QWidget
{
    Q_OBJECT

public:
    explicit MyWindow()
        : QWidget(nullptr)
    {
        setWindowTitle("Demo");
        resize(200, 80);
        // 布局
        m_layout = new QVBoxLayout();
        setLayout(m_layout);
        m_ck1 = new QCheckBox("选项一", this);
        m_ck2 = new QCheckBox("选项二", this);
        // 给这俩checkbox弄弄样式
        auto style = new MyStyle;
        // 把样式对象纳入到Qt对象树中
        // 内存清理时会自动打扫,防止泄漏
        style->setParent(this);
        m_ck1->setStyle(style);
        m_ck2->setStyle(style);
        m_layout->addWidget(m_ck1);
        m_layout->addWidget(m_ck2);
        // 设置图标
        QIcon icon;
        icon.addFile("1.png", QSize(), QIcon::Normal, QIcon::On);
        icon.addFile("2.png", QSize(), QIcon::Normal, QIcon::Off);
        m_ck1->setIcon(icon);
        m_ck2->setIcon(icon);
    }

private:
    QVBoxLayout *m_layout;
    QCheckBox *m_ck1, *m_ck2;
};

由于这个自定义样式只是针对 QCheckBox 组件,没有必要应用到 QApplication 上,直接用在 QCheckBox上就好了。哦,不要用在 QWidget 实例上,不起作用的。原因请看:

void QWidget::paintEvent(QPaintEvent *)
{
}

QWidget 类对 paint 事件是没做任何处理的,所以不会触发样式类中的各类绘制方法,除非你重写 paintEvent 方法,手动触发。所以说,咱们直接把样式应用在 QCheckBox 就很合适,QCheckBox 类是处理 paintEvent 的。

void QCheckBox::paintEvent(QPaintEvent *)
{
    QStylePainter p(this);
    QStyleOptionButton opt;
    initStyleOption(&opt);
    p.drawControl(QStyle::CE_CheckBox, opt);
}

// QStyleOptionButton 的数据在这里收集
void QCheckBox::initStyleOption(QStyleOptionButton *option) const
{
    if (!option)
        return;
    Q_D(const QCheckBox);
    // 从当前QCheckBox实例提取基本数据
    option->initFrom(this);
    // 处于被鼠标按下状态
    if (d->down)
        option->state |= QStyle::State_Sunken;
   // 除了 checked 和 unchecked 外,还存在第三状态
   // 一种未明确状态,介于 checked 与 unchecked 之间 
   if (d->tristate && d->noChange)
        option->state |= QStyle::State_NoChange;
    else
        option->state |= d->checked ? QStyle::State_On : QStyle::State_Off;
    if (testAttribute(Qt::WA_Hover) && underMouse()) {
        option->state.setFlag(QStyle::State_MouseOver, d->hovering);
    }
    // 显示的文本
    option->text = d->text;
    // 显示的图标
    option->icon = d->icon;
    // 图标的大小
    option->iconSize = iconSize();
}

在实现自定义样式时,咱们在 drawControl 方法中读到的数据就是这么来的。

写上 main 函数,试一下水。

int main(int argc, char **argv)
{
    QApplication app(argc, argv);
    MyWindow wind;
    wind.show();
    return QApplication::exec();
}

运行,验证。

这回有效果了,图标会自动切换了。是咱们想要的。

顺便提一句,如果你自定义的类,如上面的 MyStyle,MyWindow 类,这些 QObject 的子类,或包含 Q_OBJECT 宏的类。你如果没有在头文件中定义,而是像老周刚才那样,直接写在 cpp 文件中,那么,在类定义的代码后面要加一行(假设代码文件是 app.cpp):

class MyStyle : public QProxyStyle
{
    ……
};

class MyWindow : public QWidget
{
    ……
};

#include "app.moc"

int main(int argc, char **argv)
{
    ……
}

这个与 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 {” 找到默认的样式,直接在后面追加属性。

body {
    ……
    /* 下面为自定义内容 */
    opacity: 0.85;
    background-image: url('vscode-file://vscode-app/C:/Users/DXC/Pictures/bg/v2.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size:cover;
    background-attachment: fixed; 
}

你直接照抄就行,注意 background-image 的地方改成你自己的图片路径。网上的教程用的是 file:///c:/users/xxx/pictures/ 这样的路径,这个新版本不支持的,协议要改为 vscode-file:,然后路径要使用 vscode-app/ 前缀,之后才是图片的路径。

推荐选一张尺寸大一点的图片,这样既可以看得清楚,也可以覆盖整个窗口。opacity 属性设置背景的透明,这个不要弄成 100%,这样全不透明,看不到背景图片了。也不推荐低于 70%,因为太透明了,代码都看不清楚了,写代码容易近视。最好选 85 - 90% 之间,即 0.85 到 1.0。

老周知道,很多大伙伴都喜欢放动画人物,尤其是猛男们都喜欢放一些魔法少女(水手服的就……,小时候觉得不太好看,现在也觉得不太好看,当然,仅代表个人看法)。为了表示对国产动画的支持,尤其是国产魔法少女系列,老周推荐这个:

B 站上面不少猛男喜欢美雪,其实老周也喜欢,所有女生该有的优点她都有,学霸小淑女。

奥飞可能玩具卖得不太好,最近 15 周年的活动还搞得挺带劲。上次去电器城看空调,广告大屏幕里还放这个,超市里也放。

国产动画起步晚,老周小时候看的 99.9% 是日本的,国产的只看过《哪吒》。在为数不多的国产动画(特别魔法少女)里面,真的算是起步就是巅峰了。但说句难听的,衰败也很快,也就是真人版 + 前三部还可以,后面真的不行了,花里花哨,主题也太水。大电影嘛,反正老周不喜欢,都是给那些什么鬼女团做广告的,特效也是敷衍。

有人要说了,动画就是子供向的,就那样了,还要求什么。那可不,以前一些给小娃娃看的动画也设计得很好的,主题思想也明确,情节略带些深度。就像《奈克瑟斯奥特曼》一样,那可不一定小朋友就能看懂的。作为文艺作品,动画只是一样表现形式,核心价值观和思想主题也必须体现,不然还有观赏的意义吗?想一想迪迦、麦克斯、盖亚里面,有几集小时候都看不懂的。

 

与【VS Code 与 Qt6】QCheckBox的图标为什么不会切换?相似的内容:

【VS Code 与 Qt6】QCheckBox的图标为什么不会切换?

本篇专门扯一下有关 QCheckBox 组件的一个问题。老周不水字数,直接上程序,你看了就明白。 #include #include #include #include #include

【VS Code 与 Qt6】运用事件过滤器批量操作子级组件

如果某个派生自 QObject 的类重写 eventFilter 方法,那它就成了事件过滤器(Event Filter)。该方法的声明如下: virtual bool eventFilter(QObject *watched, QEvent *event); watched 参数是监听事件的对象,即

【VS Code 与 Qt6】QAction 类的一些事

QAction 类表示用户命令的一种抽象,包括命令文本、图标、命令触发后要执行的代码。菜单、工具栏按钮往往存在相同的功能,将这些命令独立抽出来,放到 QAction 以象上,可避免编写重复的代码。比如“文件”菜单下有“保存”命令,工具栏上也会有“保存”按钮。因此,创建一个表示“保存”的 QActio

用 VS Code 搞 Qt6:让信号和槽自动建立连接

Qt 具备让某个对象的信号与符合要求的槽函数自动建立连接。弄起来也很简单,只要调用这个静态方法即可: QMetaObject::connectSlotsByName(...); connectSlotsByName 方法需要一个参数,此参数的指针指向一个实例,这个实例自身的信号,以及它的子级对象的信

vscode插件

自用 vscode 插件 1. EditorConfig for VS Code editorconfig 用来定义编辑器的编码格式规范,编辑器的行为会与 .editorconfig 文件中定义的一致,并且其优先级比编辑器自身的设置要高。 简单说明:在项目根目录下创建 .editorconfi 文件

使用vscode插件查看文件的16进制

有时候想看看文件的16进制,又不想编写代码来处理,那么这时候可以使用vscode和插件Hex Editor一键查看文件的16进制 安装Hex Editor 插件 右键文件选择打开方式,然后选择Hex Editor 然后就可以查看文件的16进制了

在 VSCode 中编写 Markdown 的进阶指南

最新版的 Visual Studio Code 对 Markdown 的支持已显著提升,其在预览方面的体验甚至可以与 Markdown Preview Enhanced 插件相比。本文将介绍一些优化方法,帮助用户提升在 VSCode 中编写 Markdown 文档的体验。 官方使用说明:https:

使用js开发一个快速打开前端项目的alfred插件

使用js开发一个快速打开前端项目的插件 目录 前言 使用的技术栈 步骤 问题发现 待优化 前言 一直以来开发都是先打开vscode,然后选择项目,在项目多的情况下会觉得挺繁琐;如果同时打开了许多vscode窗口,寻找目标窗口也比较麻烦,于是萌生了开发一个alfred的工作流插件的想法,目标是在alf

一个开源轻量级的C#代码格式化工具(支持VS和VS Code)

前言 C#代码格式化工具除了ReSharper和CodeMaid,还有一款由.NET开源、免费(MIT License)、轻量级的C#语言代码格式化工具:CSharpier。 工具介绍 CSharpier是一款开源、免费、轻量级的C#语言代码格式化工具。它使用Roslyn来解析你的代码,并根据其自身

VS Code多语言笔记本扩展插件 Polyglot Notebooks

早在2022年12月12日,微软就发布了VS Code的多语言笔记本扩展插件 Polyglot Notebooks,所使用的引擎为. NET Interactive,目前支持包括C#、F#、PowerShell、JavaScript和SQL等多种语言。让数据科学家能够简单执行跨语言任务,就像是使用S