Qt編寫自定義控件30-顏色多態按鈕
1、前言
這個控件一開始打算用樣式表來實現，通過初步的探索，後面發現仍是不夠智能以及不能徹底知足需求，好比要在此控件設置多個角標，這個用QSS就很難實現，後面才慢慢研究用QPainter來繪製，我記得當時接到這個定製控件任務的時候是2016年，那時候對QPainter的使用還不是很熟悉，也就是今後控件開始，逐步研究QPainter的繪製，把全部的內置函數都使用一遍，最終用的愈來愈熟悉，使得後來到了心中有座標，萬物皆painter的境界，可能就像武林中所說的打通了任督二脈吧。 本控件除了能夠設置常規的圓角角度,邊框寬度,邊框顏色,正常顏色,按下顏色之外，還能夠設置各個角標和正文文字內容/字體/對齊方式/顏色，同時還要提供三種顏色展現模式，鬆開按下兩種顏色，按下鬆開顏色上下交替，按下鬆開顏色漸變交替。QLinearGradient是個好東西，各類顏色交替效果全靠它來實現。linux
2、實現的功能
- 1:可設置圓角角度,邊框寬度
- 2:可設置角標和正文文字內容/字體/對齊方式/顏色
- 3:可設置邊框顏色,正常顏色,按下顏色
- 4:可設置背景圖片
- 5:可設置按鈕顏色模式
3、效果圖
4、頭文件代碼
#ifndef COLORBUTTON_H
#define COLORBUTTON_H
/**
* 多樣式超級按鈕控件 做者:feiyangqingyun(QQ:517216493) 2017-9-24
* 1:可設置圓角角度,邊框寬度
* 2:可設置角標和正文文字內容/字體/對齊方式/顏色
* 3:可設置邊框顏色,正常顏色,按下顏色
* 4:可設置背景圖片
* 5:可設置按鈕顏色模式
*/
#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 ColorButton : public QWidget
#else
class ColorButton : public QWidget
#endif
{
Q_OBJECT
Q_ENUMS(ColorMode)
Q_ENUMS(TextAlign)
Q_PROPERTY(int borderRadius READ getBorderRadius WRITE setBorderRadius)
Q_PROPERTY(int borderWidth READ getBorderWidth WRITE setBorderWidth)
Q_PROPERTY(QColor borderColor READ getBorderColor WRITE setBorderColor)
Q_PROPERTY(bool showSuperText READ getShowSuperText WRITE setShowSuperText)
Q_PROPERTY(QString superText READ getSuperText WRITE setSuperText)
Q_PROPERTY(QFont superTextFont READ getSuperTextFont WRITE setSuperTextFont)
Q_PROPERTY(TextAlign superTextAlign READ getSuperTextAlign WRITE setSuperTextAlign)
Q_PROPERTY(QColor superTextColor READ getSuperTextColor WRITE setSuperTextColor)
Q_PROPERTY(QString text READ getText WRITE setText)
Q_PROPERTY(QFont textFont READ getTextFont WRITE setTextFont)
Q_PROPERTY(TextAlign textAlign READ getTextAlign WRITE setTextAlign)
Q_PROPERTY(QColor textColor READ getTextColor WRITE setTextColor)
Q_PROPERTY(QColor normalColor READ getNormalColor WRITE setNormalColor)
Q_PROPERTY(QColor pressedColor READ getPressedColor WRITE setPressedColor)
Q_PROPERTY(bool canMove READ getCanMove WRITE setCanMove)
Q_PROPERTY(QPixmap bgImage READ getBgImage WRITE setBgImage)
Q_PROPERTY(ColorMode colorMode READ getColorMode WRITE setColorMode)
public:
enum ColorMode {
ColorMode_Normal = 0, //鬆開按下兩種顏色
ColorMode_Replace = 1, //按下鬆開顏色上下交替
ColorMode_Shade = 2 //按下鬆開顏色漸變交替
};
enum TextAlign {
TextAlign_Top_Left = 0,
TextAlign_Top_Center = 1,
TextAlign_Top_Right = 2,
TextAlign_Center_Left = 3,
TextAlign_Center_Center = 4,
TextAlign_Center_Right = 5,
TextAlign_Bottom_Left = 6,
TextAlign_Bottom_Center = 7,
TextAlign_Bottom_Right = 8
};
explicit ColorButton(QWidget *parent = 0);
protected:
void mousePressEvent(QMouseEvent *);
protected:
bool eventFilter(QObject *watched, QEvent *event);
void paintEvent(QPaintEvent *);
void drawBg(QPainter *painter);
void drawText(QPainter *painter);
private:
int borderRadius; //圓角半徑
int borderWidth; //邊框寬度
QColor borderColor; //邊框顏色
bool showSuperText; //顯示角標
QString superText; //角標文字
QFont superTextFont; //角標文字字體
TextAlign superTextAlign; //角標文字對齊方式
QColor superTextColor; //角標文字顏色
QString text; //文字
QFont textFont; //文字字體
TextAlign textAlign; //文字對齊方式
QColor textColor; //文字顏色
QColor normalColor; //正常顏色
QColor pressedColor; //按下顏色
bool canMove; //是否能移動
QPixmap bgImage; //背景圖片
ColorMode colorMode; //背景色模式
bool isPressed; //是否按下
public:
int getBorderRadius() const;
int getBorderWidth() const;
QColor getBorderColor() const;
bool getShowSuperText() const;
QString getSuperText() const;
QFont getSuperTextFont() const;
TextAlign getSuperTextAlign()const;
QColor getSuperTextColor() const;
QString getText() const;
QFont getTextFont() const;
TextAlign getTextAlign() const;
QColor getTextColor() const;
QColor getNormalColor() const;
QColor getPressedColor() const;
bool getCanMove() const;
QPixmap getBgImage() const;
ColorMode getColorMode() const;
QSize sizeHint() const;
QSize minimumSizeHint() const;
public Q_SLOTS:
//設置邊框圓角角度
void setBorderRadius(int borderRadius);
//設置邊框寬度
void setBorderWidth(int borderWidth);
//設置邊框顏色
void setBorderColor(const QColor &borderColor);
//設置是否顯示角標
void setShowSuperText(bool showSuperText);
//設置角標文字
void setSuperText(const QString &superText);
//設置角標文字字體
void setSuperTextFont(const QFont &superTextFont);
//設置角標文字對齊方式
void setSuperTextAlign(const TextAlign &superTextAlign);
//設置角標文字顏色
void setSuperTextColor(const QColor &superTextColor);
//設置文字
void setText(const QString &text);
//設置文字字體
void setTextFont(const QFont &textFont);
//設置文字對齊方式
void setTextAlign(const TextAlign &textAlign);
//設置文字顏色
void setTextColor(const QColor &textColor);
//設置正常顏色
void setNormalColor(const QColor &normalColor);
//設置按下顏色
void setPressedColor(const QColor &pressedColor);
//設置是否能夠移動
void setCanMove(bool canMove);
//設置背景圖片
void setBgImage(const QPixmap &bgImage);
//設置顏色模式
void setColorMode(const ColorMode &colorMode);
Q_SIGNALS:
void clicked();
};
#endif // WKBUTTON_H
5、核心代碼
bool ColorButton::eventFilter(QObject *watched, QEvent *event)
{
if (!isEnabled()) {
return QWidget::eventFilter(watched, event);
}
static QPoint lastPoint;
if (event->type() == QEvent::MouseButtonPress) {
QMouseEvent *e = static_cast<QMouseEvent *>(event);
if (this->rect().contains(e->pos()) && (e->button() == Qt::LeftButton)) {
lastPoint = e->pos();
isPressed = true;
update();
}
} else if (event->type() == QEvent::MouseMove && isPressed && canMove) {
QMouseEvent *e = static_cast<QMouseEvent *>(event);
int dx = e->pos().x() - lastPoint.x();
int dy = e->pos().y() - lastPoint.y();
this->move(this->x() + dx, this->y() + dy);
return true;
} else if (event->type() == QEvent::MouseButtonRelease && isPressed) {
isPressed = false;
update();
}
return QWidget::eventFilter(watched, event);
}
void ColorButton::paintEvent(QPaintEvent *)
{
//繪製準備工做,啓用反鋸齒
QPainter painter(this);
painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);
//繪製背景
drawBg(&painter);
//繪製文字
drawText(&painter);
}
void ColorButton::drawBg(QPainter *painter)
{
painter->save();
//設置邊框顏色及寬度
QPen pen;
pen.setColor(borderColor);
pen.setWidthF(borderWidth);
painter->setPen(pen);
//繪製區域要減去邊框寬度
QRect rect;
rect.setX(borderWidth);
rect.setY(borderWidth);
rect.setWidth(width() - borderWidth * 2);
rect.setHeight(height() - borderWidth * 2);
//若是背景圖片存在則顯示背景圖片,不然顯示背景色
if (!bgImage.isNull()) {
//等比例縮放繪製
QPixmap img = bgImage.scaled(rect.width(), rect.height(), Qt::KeepAspectRatio, Qt::SmoothTransformation);
painter->drawPixmap((this->rect().width() - img.width()) / 2, (this->rect().height() - img.height()) / 2, img);
} else {
if (colorMode == ColorMode_Normal) {
if (isPressed) {
painter->setBrush(QBrush(pressedColor));
} else {
painter->setBrush(QBrush(normalColor));
}
} else if (colorMode == ColorMode_Replace) {
QLinearGradient gradient(QPoint(0, 0), QPoint(0, height()));
if (isPressed) {
gradient.setColorAt(0.0, pressedColor);
gradient.setColorAt(0.49, pressedColor);
gradient.setColorAt(0.50, normalColor);
gradient.setColorAt(1.0, normalColor);
} else {
gradient.setColorAt(0.0, normalColor);
gradient.setColorAt(0.49, normalColor);
gradient.setColorAt(0.50, pressedColor);
gradient.setColorAt(1.0, pressedColor);
}
painter->setBrush(gradient);
} else if (colorMode == ColorMode_Shade) {
QLinearGradient gradient(QPoint(0, 0), QPoint(0, height()));
if (isPressed) {
gradient.setColorAt(0.0, pressedColor);
gradient.setColorAt(1.0, normalColor);
} else {
gradient.setColorAt(0.0, normalColor);
gradient.setColorAt(1.0, pressedColor);
}
painter->setBrush(gradient);
}
painter->drawRoundedRect(rect, borderRadius, borderRadius);
}
painter->restore();
}
void ColorButton::drawText(QPainter *painter)
{
if (!bgImage.isNull()) {
return;
}
painter->save();
//若是要顯示角標,則從新計算顯示文字的區域
if (showSuperText) {
int offset = 3;
QRect rect;
rect.setX(borderWidth * offset);
rect.setY(borderWidth);
rect.setWidth(width() - borderWidth * offset * 2);
rect.setHeight(height() - borderWidth * 2);
Qt::Alignment alignment = Qt::AlignCenter;
if (superTextAlign == TextAlign_Top_Left) {
alignment = Qt::AlignTop | Qt::AlignLeft;
} else if (superTextAlign == TextAlign_Top_Center) {
alignment = Qt::AlignTop | Qt::AlignHCenter;
} else if (superTextAlign == TextAlign_Top_Right) {
alignment = Qt::AlignTop | Qt::AlignRight;
} else if (superTextAlign == TextAlign_Center_Left) {
alignment = Qt::AlignLeft | Qt::AlignVCenter;
} else if (superTextAlign == TextAlign_Center_Center) {
alignment = Qt::AlignHCenter | Qt::AlignVCenter;
} else if (superTextAlign == TextAlign_Center_Right) {
alignment = Qt::AlignRight | Qt::AlignVCenter;
} else if (superTextAlign == TextAlign_Bottom_Left) {
alignment = Qt::AlignBottom | Qt::AlignLeft;
} else if (superTextAlign == TextAlign_Bottom_Center) {
alignment = Qt::AlignBottom | Qt::AlignHCenter;
} else if (superTextAlign == TextAlign_Bottom_Right) {
alignment = Qt::AlignBottom | Qt::AlignRight;
}
//繪製角標
painter->setPen(superTextColor);
painter->setFont(superTextFont);
painter->drawText(rect, alignment, superText);
}
int offset = 5;
QRect rect;
rect.setX(borderWidth * offset);
rect.setY(borderWidth);
rect.setWidth(width() - borderWidth * offset * 2);
rect.setHeight(height() - borderWidth * 2);
Qt::Alignment alignment = Qt::AlignCenter;
if (textAlign == TextAlign_Top_Left) {
alignment = Qt::AlignTop | Qt::AlignLeft;
} else if (textAlign == TextAlign_Top_Center) {
alignment = Qt::AlignTop | Qt::AlignHCenter;
} else if (textAlign == TextAlign_Top_Right) {
alignment = Qt::AlignTop | Qt::AlignRight;
} else if (textAlign == TextAlign_Center_Left) {
alignment = Qt::AlignLeft | Qt::AlignVCenter;
} else if (textAlign == TextAlign_Center_Center) {
alignment = Qt::AlignHCenter | Qt::AlignVCenter;
} else if (textAlign == TextAlign_Center_Right) {
alignment = Qt::AlignRight | Qt::AlignVCenter;
} else if (textAlign == TextAlign_Bottom_Left) {
alignment = Qt::AlignBottom | Qt::AlignLeft;
} else if (textAlign == TextAlign_Bottom_Center) {
alignment = Qt::AlignBottom | Qt::AlignHCenter;
} else if (textAlign == TextAlign_Bottom_Right) {
alignment = Qt::AlignBottom | Qt::AlignRight;
}
painter->setPen(textColor);
painter->setFont(textFont);
painter->drawText(rect, alignment, text);
painter->restore();
}
6、控件介紹
- 超過149個精美控件，涵蓋了各類儀表盤、進度條、進度球、指南針、曲線圖、標尺、溫度計、導航條、導航欄，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版本，若是用戶需求量很大的話。
7、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、學習方法、寫做技巧、熱門技術、職場發展等內容，乾貨多多，福利多多！
相關文章
- 1. Qt編寫自定義控件30-顏色多態按鈕
- 2. Qt編寫自定義控件27-顏色按鈕面板
- 3. Qt編寫自定義控件9-導航按鈕控件
- 4. Qt編寫自定義控件8-動畫按鈕組控件
- 5. Qt編寫自定義控件一開關按鈕
- 6. Qt編寫自定義控件二動畫按鈕
- 7. Qt編寫自定義控件38-高亮按鈕
- 8. Qt編寫自定義控件17-按鈕進度條
- 9. Qt編寫自定義控件29-顏色選取面板
- 10. Qt編寫自定義控件52-顏色下拉框
- 更多相關文章...
- • 自定義TypeHandler - MyBatis教程
- • jQuery Mobile 按鈕 - jQuery Mobile 教程
- • RxJava操作符（十）自定義操作符
- • SpringBoot中properties文件不能自動提示解決方法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章