【VS Code 與 Qt6】QCheckBox的圖示為什么不會切換？-有解無憂

本篇專門扯一下有關 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% 是日本的，國產的只看過《哪吒》，在為數不多的國產影片（特別魔法少女）里面，真的算是起步就是巔峰了，但說句難聽的，衰敗也很快，也就是真人版 + 前三部還可以，后面真的不行了，花里花哨，主題也太水，大電影嘛，反正老周不喜歡，都是給那些什么鬼女團做廣告的，特效也是敷衍，

有人要說了，影片就是子供向的，就那樣了，還要求什么，那可不，以前一些給小娃娃看的影片也設計得很好的，主題思想也明確，情節略帶些深度，就像《奈克瑟斯奧特曼》一樣，那可不一定小朋友就能看懂的，作為文藝作品，影片只是一樣表現形式，核心價值觀和思想主題也必須體現，不然還有觀賞的意義嗎？想一想迪迦、麥克斯、蓋亞里面，有幾集小時候都看不懂的，

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/554223.html

標籤：其他

上一篇：Python潮流周刊#5：并發一百萬個任務要用多少記憶體？

下一篇：返回列表