Qt編寫自定義控件42-開關按鈕

本文轉載自查看原文 2019-08-05 09:42 1647 QT/ Qt-自定義控件/ 免費/ 自定義控件/ 插件

一、前言

從2010年進入互聯網+智能手機時代以來，各種各樣的APP大行其道，手機上面的APP有很多流行的元素，開關按鈕個人非常喜歡，手機QQ、360衛士、金山毒霸等，都有很多開關控制一些操作，在Qt widgets應用項目上，在項目中應用些類似的開關按鈕，估計也會為項目增添不少新鮮感。
總結了大部分的開關按鈕控件，基本上有兩大類，第一類是純代碼繪制，這種對代碼的掌控度要求比較高，但是靈活性比較好。第二類是貼圖，專業的美工做好的各種狀態的背景圖片，只需要用代碼將該圖片畫到界面上即可。為了能夠涵蓋兩大類的開關按鈕，特意將常見的四種類型（圓角矩形/內圓形/外圓形/圖片）都集成到了自定義的開關按鈕中。純代碼繪制開關按鈕，可以很靈活的設置各種顏色、間隔、文字等，還可以產生動畫過度的滑動效果。產生滑動效果采用定時器繪制的方式，自動計算滑塊的X軸開始坐標，當滑塊的X軸開始坐標到達滑塊的X軸結束坐標時停止定時器。
有些人說PS一張精美的圖片也不是很容易，需要專業的，這里推薦一個好方法，讓你也可以獲取到這些圖片，其實大部分的APP都可以用解壓軟件打開，拓展名改為.zip即可，解壓出來一般里面都含有絕大部分的圖片，發現絕大部分的APP都喜歡用圖片作為背景來展示一些效果，而不是原原本本的用代碼一點點繪制。騰訊就是騰訊啊，大公司！人家的美工MM設計的圖片那真的沒得話說，絕對一流，手機QQ每次升級一個版本，我都會下過來將里面的精美圖片圖標之類的提取出來，以便項目使用。同時還推薦兩個網站：http://www.easyicon.net/ 我的所有項目用到的ico圖標都是這網站上面的。http://www.ui.cn/ 專業的設計師集中營，這里面成千上萬的精美的設計的圖片，可以多多參考。

二、實現的功能

1:可設置開關按鈕的樣式圓角矩形/內圓形/外圓形
2:可設置選中和未選中時的背景顏色
3:可設置選中和未選中時的滑塊顏色
4:可設置顯示的文本
5:可設置滑塊離背景的間隔
6:可設置圓角角度
7:可設置是否顯示動畫過渡效果

三、效果圖

四、頭文件代碼

#ifndef SWITCHBUTTON_H
#define SWITCHBUTTON_H

/**
 * 開關按鈕控件 作者:feiyangqingyun(QQ:517216493) 2016-11-6
 * 1:可設置開關按鈕的樣式 圓角矩形/內圓形/外圓形
 * 2:可設置選中和未選中時的背景顏色
 * 3:可設置選中和未選中時的滑塊顏色
 * 4:可設置顯示的文本
 * 5:可設置滑塊離背景的間隔
 * 6:可設置圓角角度
 * 7:可設置是否顯示動畫過渡效果
 */

#include <QWidget>

#ifdef quc
#if (QT_VERSION < QT_VERSION_CHECK(5,7,0))
#include <QtDesigner/QDesignerExportWidget>
#else
#include <QtUiPlugin/QDesignerExportWidget>
#endif

class QDESIGNER_WIDGET_EXPORT SwitchButton : public QWidget
#else
class SwitchButton : public QWidget
#endif

{
    Q_OBJECT
    Q_ENUMS(ButtonStyle)

    Q_PROPERTY(int space READ getSpace WRITE setSpace)
    Q_PROPERTY(int rectRadius READ getRectRadius WRITE setRectRadius)
    Q_PROPERTY(bool checked READ getChecked WRITE setChecked)
    Q_PROPERTY(bool showText READ getShowText WRITE setShowText)
    Q_PROPERTY(bool showCircle READ getShowCircle WRITE setShowCircle)
    Q_PROPERTY(bool animation READ getAnimation WRITE setAnimation)
    Q_PROPERTY(ButtonStyle buttonStyle READ getButtonStyle WRITE setButtonStyle)

    Q_PROPERTY(QColor bgColorOff READ getBgColorOff WRITE setBgColorOff)
    Q_PROPERTY(QColor bgColorOn READ getBgColorOn WRITE setBgColorOn)
    Q_PROPERTY(QColor sliderColorOff READ getSliderColorOff WRITE setSliderColorOff)
    Q_PROPERTY(QColor sliderColorOn READ getSliderColorOn WRITE setSliderColorOn)
    Q_PROPERTY(QColor textColorOff READ getTextColorOff WRITE setTextColorOff)
    Q_PROPERTY(QColor textColorOn READ getTextColorOn WRITE setTextColorOn)

    Q_PROPERTY(QString textOff READ getTextOff WRITE setTextOff)
    Q_PROPERTY(QString textOn READ getTextOn WRITE setTextOn)

public:
    enum ButtonStyle {
        ButtonStyle_Rect = 0,       //圓角矩形
        ButtonStyle_CircleIn = 1,   //內圓形
        ButtonStyle_CircleOut = 2   //外圓形
    };

    SwitchButton(QWidget *parent = 0);
    ~SwitchButton();

protected:
    void mousePressEvent(QMouseEvent *);
    void resizeEvent(QResizeEvent *);
    void paintEvent(QPaintEvent *);
    void drawBg(QPainter *painter);
    void drawSlider(QPainter *painter);

private:
    int space;                      //滑塊離背景間隔
    int rectRadius;                 //圓角角度
    bool checked;                   //是否選中
    bool showText;                  //顯示文字
    bool showCircle;                //顯示小圓
    bool animation;                 //動畫過渡

    ButtonStyle buttonStyle;        //開關按鈕樣式

    QColor bgColorOff;              //關閉時背景顏色
    QColor bgColorOn;               //打開時背景顏色
    QColor sliderColorOff;          //關閉時滑塊顏色
    QColor sliderColorOn;           //打開時滑塊顏色
    QColor textColorOff;            //關閉時文字顏色
    QColor textColorOn;             //打開時文字顏色

    QString textOff;                //關閉時顯示的文字
    QString textOn;                 //打開時顯示的文字

    int step;                       //每次移動的步長
    int startX;                     //滑塊開始X軸坐標
    int endX;                       //滑塊結束X軸坐標
    QTimer *timer;                  //定時器繪制

private slots:
    void change();
    void updateValue();

public:
    int getSpace()                  const;
    int getRectRadius()             const;
    bool getChecked()               const;
    bool getShowText()              const;
    bool getShowCircle()            const;
    bool getAnimation()             const;

    ButtonStyle getButtonStyle()    const;

    QColor getBgColorOff()          const;
    QColor getBgColorOn()           const;
    QColor getSliderColorOff()      const;
    QColor getSliderColorOn()       const;
    QColor getTextColorOff()        const;
    QColor getTextColorOn()         const;

    QString getTextOff()            const;
    QString getTextOn()             const;

    QSize sizeHint()                const;
    QSize minimumSizeHint()         const;

public Q_SLOTS:
    //設置間隔
    void setSpace(int space);
    //設置圓角角度
    void setRectRadius(int rectRadius);
    //設置是否選中
    void setChecked(bool checked);
    //設置是否顯示文字
    void setShowText(bool showText);
    //設置是否顯示小圓
    void setShowCircle(bool showCircle);
    //設置是否動畫過渡
    void setAnimation(bool animation);

    //設置風格樣式
    void setButtonStyle(const ButtonStyle &buttonStyle);

    //設置背景顏色
    void setBgColorOff(const QColor &bgColorOff);
    void setBgColorOn(const QColor &bgColorOn);

    //設置滑塊顏色
    void setSliderColorOff(const QColor &sliderColorOff);
    void setSliderColorOn(const QColor &sliderColorOn);

    //設置文字顏色
    void setTextColorOff(const QColor &textColorOff);
    void setTextColorOn(const QColor &textColorOn);

    //設置文字
    void setTextOff(const QString &textOff);
    void setTextOn(const QString &textOn);

Q_SIGNALS:
    void checkedChanged(bool checked);
};

#endif // SWITCHBUTTON_H

五、核心代碼

void SwitchButton::paintEvent(QPaintEvent *)
{
    //繪制准備工作,啟用反鋸齒
    QPainter painter(this);
    painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);

    //繪制背景
    drawBg(&painter);
    //繪制滑塊
    drawSlider(&painter);
}

void SwitchButton::drawBg(QPainter *painter)
{
    painter->save();
    painter->setPen(Qt::NoPen);

    QColor bgColor = checked ? bgColorOn : bgColorOff;
    if (!isEnabled()) {
        bgColor.setAlpha(60);
    }

    painter->setBrush(bgColor);

    if (buttonStyle == ButtonStyle_Rect) {
        painter->drawRoundedRect(rect(), rectRadius, rectRadius);
    } else if (buttonStyle == ButtonStyle_CircleIn) {
        QRect rect(0, 0, width(), height());
        //半徑為高度的一半
        int side = qMin(rect.width(), rect.height());

        //左側圓
        QPainterPath path1;
        path1.addEllipse(rect.x(), rect.y(), side, side);
        //右側圓
        QPainterPath path2;
        path2.addEllipse(rect.width() - side, rect.y(), side, side);
        //中間矩形
        QPainterPath path3;
        path3.addRect(rect.x() + side / 2, rect.y(), rect.width() - side, rect.height());

        QPainterPath path;
        path = path3 + path1 + path2;
        painter->drawPath(path);
    } else if (buttonStyle == ButtonStyle_CircleOut) {
        QRect rect(height() / 2, space, width() - height(), height() - space * 2);
        painter->drawRoundedRect(rect, rectRadius, rectRadius);
    }

    if (buttonStyle == ButtonStyle_Rect || buttonStyle == ButtonStyle_CircleIn) {
        //繪制文本和小圓,互斥
        if (showText) {
            int sliderWidth = qMin(width(), height()) - space * 2;
            if (buttonStyle == ButtonStyle_Rect) {
                sliderWidth = width() / 2 - 5;
            } else if (buttonStyle == ButtonStyle_CircleIn) {
                sliderWidth -= 5;
            }

            if (checked) {
                QRect textRect(0, 0, width() - sliderWidth, height());
                painter->setPen(textColorOn);
                painter->drawText(textRect, Qt::AlignCenter, textOn);
            } else {
                QRect textRect(sliderWidth, 0, width() - sliderWidth, height());
                painter->setPen(textColorOff);
                painter->drawText(textRect, Qt::AlignCenter, textOff);
            }
        } else if (showCircle) {
            int side = qMin(width(), height()) / 2;
            int y = (height() - side) / 2;

            if (checked) {
                QRect circleRect(side / 2, y, side, side);
                QPen pen(textColorOn, 2);
                painter->setPen(pen);
                painter->setBrush(Qt::NoBrush);
                painter->drawEllipse(circleRect);
            } else {
                QRect circleRect(width() - (side * 1.5), y, side, side);
                QPen pen(textColorOff, 2);
                painter->setPen(pen);
                painter->setBrush(Qt::NoBrush);
                painter->drawEllipse(circleRect);
            }
        }
    }

    painter->restore();
}

void SwitchButton::drawSlider(QPainter *painter)
{
    painter->save();
    painter->setPen(Qt::NoPen);

    if (!checked) {
        painter->setBrush(sliderColorOff);
    } else {
        painter->setBrush(sliderColorOn);
    }

    if (buttonStyle == ButtonStyle_Rect) {
        int sliderWidth = width() / 2 - space * 2;
        int sliderHeight = height() - space * 2;
        QRect sliderRect(startX + space, space, sliderWidth , sliderHeight);
        painter->drawRoundedRect(sliderRect, rectRadius, rectRadius);
    } else if (buttonStyle == ButtonStyle_CircleIn) {
        QRect rect(0, 0, width(), height());
        int sliderWidth = qMin(rect.width(), rect.height()) - space * 2;
        QRect sliderRect(startX + space, space, sliderWidth, sliderWidth);
        painter->drawEllipse(sliderRect);
    } else if (buttonStyle == ButtonStyle_CircleOut) {
        int sliderWidth = this->height();
        QRect sliderRect(startX, 0, sliderWidth, sliderWidth);

        QColor color1 = (checked ? Qt::white : bgColorOff);
        QColor color2 = (checked ? sliderColorOn : sliderColorOff);

        QRadialGradient radialGradient(sliderRect.center(), sliderWidth / 2);
        radialGradient.setColorAt(0, checked ? color1 : color2);
        radialGradient.setColorAt(0.5, checked ? color1 : color2);
        radialGradient.setColorAt(0.6, checked ? color2 : color1);
        radialGradient.setColorAt(1.0, checked ? color2 : color1);
        painter->setBrush(radialGradient);

        painter->drawEllipse(sliderRect);
    }

    painter->restore();
}

六、控件介紹

超過150個精美控件，涵蓋了各種儀表盤、進度條、進度球、指南針、曲線圖、標尺、溫度計、導航條、導航欄，flatui、高亮按鈕、滑動選擇器、農歷等。遠超qwt集成的控件數量。
每個類都可以獨立成一個單獨的控件，零耦合，每個控件一個頭文件和一個實現文件，不依賴其他文件，方便單個控件以源碼形式集成到項目中，較少代碼量。qwt的控件類環環相扣，高度耦合，想要使用其中一個控件，必須包含所有的代碼。
全部純Qt編寫，QWidget+QPainter繪制，支持Qt4.6到Qt5.12的任何Qt版本，支持mingw、msvc、gcc等編譯器，支持任意操作系統比如windows+linux+mac+嵌入式linux等，不亂碼，可直接集成到Qt Creator中，和自帶的控件一樣使用，大部分效果只要設置幾個屬性即可，極為方便。
每個控件都有一個對應的單獨的包含該控件源碼的DEMO，方便參考使用。同時還提供一個所有控件使用的集成的DEMO。
每個控件的源代碼都有詳細中文注釋，都按照統一設計規范編寫，方便學習自定義控件的編寫。
每個控件默認配色和demo對應的配色都非常精美。
超過130個可見控件，6個不可見控件。
部分控件提供多種樣式風格選擇，多種指示器樣式選擇。
所有控件自適應窗體拉伸變化。
集成自定義控件屬性設計器，支持拖曳設計，所見即所得，支持導入導出xml格式。
自帶activex控件demo，所有控件可以直接運行在ie瀏覽器中。
集成fontawesome圖形字體+阿里巴巴iconfont收藏的幾百個圖形字體，享受圖形字體帶來的樂趣。
所有控件最后生成一個dll動態庫文件，可以直接集成到qtcreator中拖曳設計使用。
目前已經有qml版本，后期會考慮出pyqt版本，如果用戶需求量很大的話。

七、SDK下載

SDK下載鏈接：https://pan.baidu.com/s/1A5Gd77kExm8Co5ckT51vvQ 提取碼：877p
下載鏈接中包含了各個版本的動態庫文件，所有控件的頭文件，使用demo，自定義控件+屬性設計器。
自定義控件插件開放動態庫dll使用（永久免費），無任何后門和限制，請放心使用。
目前已提供26個版本的dll，其中包括了qt5.12.3 msvc2017 32+64 mingw 32+64 的。
不定期增加控件和完善控件，不定期更新SDK，歡迎各位提出建議，謝謝！
widget版本（QQ：517216493）qml版本（QQ：373955953）三峰駝（QQ：278969898）。
濤哥的知乎專欄 Qt進階之路 https://zhuanlan.zhihu.com/TaoQt
歡迎關注微信公眾號【高效程序員】，C++/Python、學習方法、寫作技巧、熱門技術、職場發展等內容，干貨多多，福利多多！
Qt入門書籍推薦霍亞飛的《Qt Creator快速入門》《Qt5編程入門》，Qt進階書籍推薦官方的《C++ GUI Qt4編程》。
強烈推薦程序員自我修養和規划系列書《大話程序員》《程序員的成長課》《解憂程序員》！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。