前言
動畫按鈕組控制元件可以用來當做各種漂亮的導航條用,既可以設定成頂部底部+左側右側,還自帶精美的滑動效果,還可以設定懸停滑動等各種顏色,原創作者雨田哥(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
class
QBoxLayout
;
class
QAbstractButton
;
class
QButtonGroup
;
class
QPropertyAnimation
;
#ifdef quc
#if (QT_VERSION < QT_VERSION_CHECK(5,7,0))
#include
#else
#include
#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
));
}
控制元件介紹
1。 超過140個精美控制元件,涵蓋了各種儀表盤、進度條、進度球、指南針、曲線圖、標尺、溫度計、導航條、導航欄,flatui、高亮按鈕、滑動選擇器、農曆等。遠超qwt整合的控制元件數量。
2。 每個類都可以獨立成一個單獨的控制元件,零耦合,每個控制元件一個頭檔案和一個實現檔案,不依賴其他檔案,方便單個控制元件以原始碼形式整合到專案中,較少程式碼量。qwt的控制元件類環環相扣,高度耦合,想要使用其中一個控制元件,必須包含所有的程式碼。
3。 全部純Qt編寫,QWidget+QPainter繪製,支援Qt4。6到Qt5。12的任何Qt版本,支援mingw、msvc、gcc等編譯器,不亂碼,可直接整合到Qt Creator中,和自帶的控制元件一樣使用,大部分效果只要設定幾個屬性即可,極為方便。
4。 每個控制元件都有一個對應的單獨的包含該控制元件原始碼的DEMO,方便參考使用。同時還提供一個所有控制元件使用的整合的DEMO。
5。 每個控制元件的原始碼都有詳細中文註釋,都按照統一設計規範編寫,方便學習自定義控制元件的編寫。
6。 每個控制元件預設配色和demo對應的配色都非常精美。
7。 超過120個可見控制元件,6個不可見控制元件。
8。 部分控制元件提供多種樣式風格選擇,多種指示器樣式選擇。
9。 所有控制元件自適應窗體拉伸變化。
10。 整合自定義控制元件屬性設計器,支援拖曳設計,所見即所得,支援匯入匯出xml格式。
11。 自帶activex控制元件demo,所有控制元件可以直接執行在ie瀏覽器中。
12。 整合fontawesome圖形字型+阿里巴巴iconfont收藏的幾百個圖形字型,享受圖形字型帶來的樂趣。
13。 所有控制元件最後生成一個dll動態庫檔案,可以直接整合到qtcreator中拖曳設計使用。
SDK下載
- SDK下載連結:
https://
pan。baidu。com/s/1tD9v1Y
PfE2fgYoK6lqUr1Q
提取碼:lyhk
- 自定義控制元件+屬性設計器欣賞:
https://
pan。baidu。com/s/1l6L3rK
SiLu_uYi7lnL3ibQ
提取碼:tmvl
- 下載連結中包含了各個版本的動態庫檔案,所有控制元件的標頭檔案,使用demo。
- 自定義控制元件外掛開放動態庫dll使用(永久免費),無任何後門和限制,請放心使用。
- 不定期增加控制元件和完善控制元件,不定期更新SDK,歡迎各位提出建議,謝謝!
- widget版本(QQ:517216493)qml版本(QQ:373955953)三峰駝(QQ:278969898)。