一、前言從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>#endifclass QDESIGNER_WIDGET_EXPORT SwitchButton : public QWidget#elseclass 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();}六、控制元件介紹 1. 超過150個精美控制元件，涵蓋了各種儀表盤、進度條、進度球、指南針、曲線圖、標尺、溫度計、導航條、導航欄，flatui、高亮按鈕、滑動選擇器、農歷等。遠超qwt集成的控制元件數量。 2. 每個類都可以獨立成一個單獨的控制元件，零耦合，每個控制元件一個頭檔案和一個實作檔案，不依賴其他檔案，方便單個控制元件以原始碼形式集成到專案中，較少代碼量。qwt的控制元件類環環相扣，高度耦合，想要使用其中一個控制元件，必須包含所有的代碼。 3. 全部純Qt撰寫，QWidget+QPainter繪制，支持Qt4.6到Qt5.12的任何Qt版本，支持mingw、msvc、gcc等編譯器，支持任意作業系統比如windows+linux+mac+嵌入式linux等，不亂碼，可直接集成到Qt Creator中，和自帶的控制元件一樣使用，大部分效果只要設定幾個屬性即可，極為方便。 4. 每個控制元件都有一個對應的單獨的包含該控制元件原始碼的DEMO，方便參考使用。同時還提供一個所有控制元件使用的集成的DEMO。 5. 每個控制元件的源代碼都有詳細中文注釋，都按照統一設計規范撰寫，方便學習自定義控制元件的撰寫。 6. 每個控制元件默認配色和demo對應的配色都非常精美。 7. 超過130個可見控制元件，6個不可見控制元件。 8. 部分控制元件提供多種樣式風格選擇，多種指示器樣式選擇。 9. 所有控制元件自適應表單拉伸變化。 10. 集成自定義控制元件屬性設計器，支持拖曳設計，所見即所得，支持匯入匯出xml格式。 11. 自帶activex控制元件demo，所有控制元件可以直接運行在ie瀏覽器中。 12. 集成fontawesome圖形字體+阿里巴巴iconfont收藏的幾百個圖形字體，享受圖形字體帶來的樂趣。 13. 所有控制元件最后生成一個dll動態庫檔案，可以直接集成到qtcreator中拖曳設計使用。 14. 目前已經有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編程》。 - 強烈推薦程式員自我修養和規劃系列書《大話程式員》《程式員的成長課》《解憂程式員》！
uj5u.com熱心網友回復：
你這是不歸路。uj5u.com熱心網友回復：
本來想學你發點東西，弄點錢花，沒想到連你這級別的人都沒活干uj5u.com熱心網友回復：
復制粘貼有意思？轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/216264.html
標籤：其他技術討論專區
上一篇：intellij idea 中tomcat報錯Error during artifact deployment. See server log for details.