Qt編寫自定義控件8-動畫按鈕組控件

時間 2019-11-11

標籤編寫自定義控件動畫按鈕简体版

原文原文鏈接

前言

動畫按鈕組控件能夠用來當作各類漂亮的導航條用，既能夠設置成頂部底部+左側右側，還自帶精美的滑動效果，還能夠設置懸停滑動等各類顏色，原創做者雨田哥(QQ:3246214072)，馳騁Qt控件界多年，雨田哥是我見過的在這塊水平至關牛逼的，在我之上，想要什麼效果均可以搞出來，你們也能夠找他定製控件，物美價廉！c++

實現的功能

1:可設置線條的寬度
2:可設置線條的顏色
3:可設置線條的位置上下左右
4:可設置按鈕的正常+懸停+選中背景顏色
5:可設置文字的正常+懸停+選中背景顏色
6:切換位置線條自動跟隨
7:可設置按鈕字符串組合生成按鈕組
8:可設置線條滑動的速度

效果圖

頭文件代碼

#ifndef BUTTONGROUP_H
#define BUTTONGROUP_H

/**
 * 動畫按鈕組控件 做者:feiyangqingyun(QQ:517216493) 2018-9-12
 * 參考雨田哥(QQ:3246214072) https://blog.csdn.net/ly305750665/article/details/80736504
 * 1:可設置線條的寬度
 * 2:可設置線條的顏色
 * 3:可設置線條的位置 上下左右
 * 4:可設置按鈕的正常+懸停+選中背景顏色
 * 5:可設置文字的正常+懸停+選中背景顏色
 * 6:切換位置線條自動跟隨
 * 7:可設置按鈕字符串組合生成按鈕組
 * 8:可設置線條滑動的速度
 */

#include <QWidget>

class QBoxLayout;
class QAbstractButton;
class QButtonGroup;
class QPropertyAnimation;

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

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

{
    Q_OBJECT
    Q_ENUMS(LinePosition)

    Q_PROPERTY(int interval READ getInterval WRITE setInterval)
    Q_PROPERTY(int lineLen READ getLineLen WRITE setLineLen)
    Q_PROPERTY(int index READ getIndex WRITE setIndex)
    Q_PROPERTY(QString texts READ getTexts WRITE setTexts)
    Q_PROPERTY(LinePosition linePosition READ getLinePosition WRITE setLinePosition)

    Q_PROPERTY(QColor lineColor READ getLineColor WRITE setLineColor)
    Q_PROPERTY(QColor btnNormalColor READ getBtnNormalColor WRITE setBtnNormalColor)
    Q_PROPERTY(QColor btnHoverColor READ getBtnHoverColor WRITE setBtnHoverColor)
    Q_PROPERTY(QColor btnDarkColor READ getBtnDarkColor WRITE setBtnDarkColor)
    Q_PROPERTY(QColor textNormalColor READ getTextNormalColor WRITE setTextNormalColor)
    Q_PROPERTY(QColor textHoverColor READ getTextHoverColor WRITE setTextHoverColor)
    Q_PROPERTY(QColor textDarkColor READ getTextDarkColor WRITE setTextDarkColor)
    Q_PROPERTY(QColor baseColor READ getBaseColor WRITE setBaseColor)

public:
    enum LinePosition {
        LinePosition_Left = 0,     //左邊
        LinePosition_Right = 1,    //右邊
        LinePosition_Top = 2,      //上邊
        LinePosition_Bottom = 3    //下邊
    };

    explicit ButtonGroup(QWidget *parent = 0);
    ~ButtonGroup();

protected:
    void resizeEvent(QResizeEvent *);
    void showEvent(QShowEvent *);
    void paintEvent(QPaintEvent *);

private:
    int interval;                   //線條移動的速度
    int lineLen;                    //線條的長度
    int index;                      //當前索引
    QString texts;                  //按鈕文本集合
    LinePosition linePosition;      //線條方向

    QColor lineColor;               //線條的顏色
    QColor btnNormalColor;          //按鈕正常顏色
    QColor btnHoverColor;           //按鈕通過顏色
    QColor btnDarkColor;            //按鈕加深選中顏色
    QColor textNormalColor;         //文字正常顏色
    QColor textHoverColor;          //文字通過顏色
    QColor textDarkColor;           //文字加深選中顏色
    QColor baseColor;               //基準顏色

    int previousIndex;              //上一個按鈕索引
    int offset;                     //偏移量
    QSize btnSize;                  //按鈕的尺寸
    QBoxLayout *layout;             //佈局
    QButtonGroup *btnGroup;         //按鈕組
    QList<QAbstractButton *> btns;  //按鈕集合
    QPropertyAnimation *animation;  //屬性動畫

private slots:
    void onButtonClicked(int index);
    void onValueChanged(const QVariant &value);

public:
    int getInterval()               const;
    int getLineLen()                const;
    int getIndex()                  const;
    QString getTexts()              const;
    LinePosition getLinePosition()  const;

    QColor getLineColor()           const;
    QColor getBtnNormalColor()      const;
    QColor getBtnHoverColor()       const;
    QColor getBtnDarkColor()        const;
    QColor getTextNormalColor()     const;
    QColor getTextHoverColor()      const;
    QColor getTextDarkColor()       const;
    QColor getBaseColor()           const;

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

public Q_SLOTS:
    //設置線條移動的速度
    void setInterval(int interval);
    //設置線條的尺寸
    void setLineLen(int lineLen);
    //設置當前索引,選中按鈕
    void setIndex(int index);
    //設置按鈕文本集合
    void setTexts(const QString &texts);
    //設置線條方向
    void setLinePosition(const LinePosition &linePosition);

    //設置線條顏色
    void setLineColor(const QColor &lineColor);
    //設置按鈕正常顏色
    void setBtnNormalColor(const QColor &btnNormalColor);
    //設置按鈕懸停顏色
    void setBtnHoverColor(const QColor &btnHoverColor);
    //設置鼠標選中顏色
    void setBtnDarkColor(const QColor &btnDarkColor);
    //設置文字正常顏色
    void setTextNormalColor(const QColor &textNormalColor);
    //設置文字懸停顏色
    void setTextHoverColor(const QColor &textHoverColor);
    //設置文字選中顏色
    void setTextDarkColor(const QColor &textDarkColor);
    //設置基準顏色
    void setBaseColor(const QColor &baseColor, bool normal = false);

    //初始化按下按鈕
    void init();
    //添加按鈕
    void addButton(QAbstractButton *btn, int id);
    //結束添加
    void addFinsh();    
    //設置按鈕樣式
    void setBtnStyle();

Q_SIGNALS:
    void buttonClicked(int index);
    void buttonClicked(QAbstractButton *btn);
};

#endif // BUTTONGROUP_H

核心代碼

void ButtonGroup::paintEvent(QPaintEvent *)
{
    if (btns.count() == 0) {
        return;
    }

    QPainter painter(this);
    painter.setRenderHints(QPainter::Antialiasing);

    //設置顏色
    painter.setPen(Qt::NoPen);
    painter.setBrush(lineColor);

    //根據不一樣的位置繪製線條區域,也能夠改爲繪製兩點之間的距離
    if (linePosition == LinePosition_Top) {
        painter.drawRect(offset, 0, btnSize.width(), lineLen);
    } else if (linePosition == LinePosition_Bottom) {
        painter.drawRect(offset, this->height() - lineLen, btnSize.width(), lineLen);
    } else if (linePosition == LinePosition_Left) {
        painter.drawRect(0, offset, lineLen, btnSize.height());
    } else if (linePosition == LinePosition_Right) {
        painter.drawRect(this->width() - lineLen, offset, lineLen, btnSize.height());
    }
}

void ButtonGroup::onButtonClicked(int index)
{
    //當前按鈕選中
    btnGroup->button(index)->setChecked(true);

    //更新當前按鈕和上一個按鈕的索引
    previousIndex = this->index;
    this->index = index;

    //根據線條位置設置動畫啓動和結束值
    if (linePosition == LinePosition_Top || linePosition == LinePosition_Bottom) {
        animation->setStartValue(btns.at(previousIndex)->x());
        animation->setEndValue(btns.at(index)->x());
    } else if (linePosition == LinePosition_Left || linePosition == LinePosition_Right) {
        animation->setStartValue(btns.at(previousIndex)->y());
        animation->setEndValue(btns.at(index)->y());
    }

    //啓動動畫移動線條
    animation->start();

    //發送信號出去
    emit buttonClicked(index);
    emit buttonClicked(btns.at(index));
}

控件介紹

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