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

本文轉載自查看原文 2019-04-25 17:03 906 QT/ Qt-自定義控件/ 免費/ 自定義控件/ 插件

前言

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

實現的功能

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中拖曳設計使用。

SDK下載

SDK下載鏈接：https://pan.baidu.com/s/1tD9v1YPfE2fgYoK6lqUr1Q 提取碼：lyhk
自定義控件+屬性設計器欣賞：https://pan.baidu.com/s/1l6L3rKSiLu_uYi7lnL3ibQ 提取碼：tmvl
下載鏈接中包含了各個版本的動態庫文件，所有控件的頭文件，使用demo。
自定義控件插件開放動態庫dll使用（永久免費），無任何后門和限制，請放心使用。
不定期增加控件和完善控件，不定期更新SDK，歡迎各位提出建議，謝謝！
widget版本（QQ：517216493）qml版本（QQ：373955953）三峰駝（QQ：278969898）。

免責聲明！

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