現在的web發展越來越快，很多流行的布局樣式，都是從web開始的，寫慣了Qt widgets 項目，很多時候想改進一下現有的人機交互，尤其是在現有的按鈕上加一些動畫的效果，例如鼠標移上去變大，移開還原。
Qt編寫自定義控件還是非常方便和非常強大的，數量掌握Qpainter的各種繪制，自定義任意控件幾乎都不是難題，只有想不到，沒有做不到。
貼一張個人認為做的比較炫的UI界面：
如果工控項目的界面能夠做到這種程序，應該可以讓人眼前一亮。
運行效果圖：
核心代碼：
void AnimationButton::paintEvent(QPaintEvent *) { if (image.isEmpty()) { return; } QPainter painter(this); painter.setRenderHint(QPainter::Antialiasing); QPixmap pix(image); pix = pix.scaled(targetWidth, targetHeight, Qt::KeepAspectRatio, Qt::SmoothTransformation); if (enter || leave) { int pixX = rect().center().x() - targetWidth / 2; int pixY = rect().center().y() - targetHeight / 2 - 10; QPoint point(pixX, pixY); painter.drawPixmap(point, pix); painter.drawText(QRectF(0, height() - 20, width(), 20), Qt::AlignCenter, text); } }
完整代碼：
animationbutton.h
#ifndef ANIMATIONBUTTON_H #define ANIMATIONBUTTON_H /** * 作者:feiyangqingyun(QQ:517216493) 2016-10-22 * 1:可設置顯示的圖像和底部的文字 */ #include <QWidget> #include <QVariant> class QPropertyAnimation; class AnimationButton : public QWidget { Q_OBJECT public: explicit AnimationButton(QWidget *parent = 0); ~AnimationButton(); protected: void enterEvent(QEvent *); void leaveEvent(QEvent *); void paintEvent(QPaintEvent *); private: bool enter; //是否進入 bool leave; //是否離開 int pixWidth; //圖片寬度 int pixHeight; //圖片高度 int oldWidth; //圖片舊寬度 int oldHeight; //圖片舊高度 QPropertyAnimation *enterAnimation; //進入動畫 QPropertyAnimation *leaveAnimation; //離開動畫 int targetWidth; //目標寬度 int targetHeight; //目標高度 QString text; //顯示文字 QString image; //圖像路徑 private slots: void enterImageChanged(QVariant index); void leaveImageChanged(QVariant index); public slots: //設置顯示的文字 void setText(QString text); //設置顯示的圖像 void setImage(QString image); }; #endif // ANIMATIONBUTTON_H
animationbutton.cpp
#include "animationbutton.h" #include "qpainter.h" #include "qpropertyanimation.h" #include "qdebug.h" AnimationButton::AnimationButton(QWidget *parent) : QWidget(parent) { enter = true; leave = false; pixWidth = 0; pixHeight = 0; oldWidth = 0; oldHeight = 0; enterAnimation = new QPropertyAnimation(this, ""); enterAnimation->setStartValue(0); enterAnimation->setEndValue(5); enterAnimation->setDuration(200); connect(enterAnimation, SIGNAL(valueChanged(QVariant)), this, SLOT(enterImageChanged(QVariant))); leaveAnimation = new QPropertyAnimation(this, ""); leaveAnimation->setStartValue(0); leaveAnimation->setEndValue(5); leaveAnimation->setDuration(200); connect(leaveAnimation, SIGNAL(valueChanged(QVariant)), this, SLOT(leaveImageChanged(QVariant))); } AnimationButton::~AnimationButton() { delete enterAnimation; delete leaveAnimation; } void AnimationButton::enterEvent(QEvent *) { enter = true; leave = false; pixWidth = pixWidth - 25; pixHeight = pixHeight - 25; enterAnimation->start(); } void AnimationButton::leaveEvent(QEvent *) { enter = false; leave = true; pixWidth = oldWidth; pixHeight = oldHeight; leaveAnimation->start(); } void AnimationButton::paintEvent(QPaintEvent *) { if (image.isEmpty()) { return; } QPainter painter(this); painter.setRenderHint(QPainter::Antialiasing); QPixmap pix(image); pix = pix.scaled(targetWidth, targetHeight, Qt::KeepAspectRatio, Qt::SmoothTransformation); if (enter || leave) { int pixX = rect().center().x() - targetWidth / 2; int pixY = rect().center().y() - targetHeight / 2 - 10; QPoint point(pixX, pixY); painter.drawPixmap(point, pix); painter.drawText(QRectF(0, height() - 20, width(), 20), Qt::AlignCenter, text); } } void AnimationButton::enterImageChanged(QVariant index) { int i = index.toInt(); targetWidth = pixWidth + i * 5; targetHeight = pixHeight + i * 5; update(); } void AnimationButton::leaveImageChanged(QVariant index) { int i = index.toInt(); targetWidth = pixWidth - i * 5; targetHeight = pixWidth - i * 5; update(); } void AnimationButton::setImage(QString image) { this->image = image; QPixmap pix(image); pixWidth = pix.width(); pixHeight = pix.height(); oldWidth = pixWidth; oldHeight = pixHeight; targetWidth = pixWidth - 25; targetHeight = pixHeight - 25; update(); } void AnimationButton::setText(QString text) { this->text = text; update(); }
此自定義控件集成在QFramework中。
自定義控件可執行文件下載：http://pan.baidu.com/s/1i5iCfzv
QFramework簡介：
QFramework是一套通用的Qt程序開發框架，集成主界面布局、各種自定義控件、數據庫處理、excel極速導出、數據打印、串口通信、網絡通信、協議解析、全局熱鍵、郵件發送，短信發送，百度地圖調用、ffmpeg+vlc處理等功能，將常用的功能封裝成類庫，提供統一直觀的調用接口，方便使用者使用，對應封裝的庫都有對應的demo程序。
QFramework基本功能：
1：支持從4.7.0到5.7.0的任何Qt版本，不受版本限制。用了此框架，不會再有Qt版本不同而引起的程序編譯通不過的煩惱。
2：極速導出數據到excel，支持表格數據或者查詢的數據，不依賴任何組件，支持任何excel、wps等表格軟件版本，導出10萬行數據8個字段只需要3秒完成。對導出的表格樣式可自定義主標題和副標題，可對導出的數據按照指定條件紅色突出顯示。
3：數據導出到pdf及打印功能，支持表格數據或者查詢的數據，支持橫向縱向打印，自動分頁。
4：數據分頁dbapi類，只需傳入表格對象，表名，翻頁按鈕即可。無需再寫重復的方法處理翻頁。
5：各種自定義控件，例如開關按鈕、發光按鈕，儀表盤控件、音量控件、溫濕度控件、儀表儀器類控件等。
6：全新超級中英雙拼輸入法，非常適合觸摸設備。
7：全局熱鍵處理。
8：串口熱敏打印機打印。
9：qcustomplot 2D圖形曲線繪制（含鼠標數據跟蹤）。
10：多線程郵件發送，支持多個接收郵箱。
11：多線程短信發送，支持多個接收號碼及長短信。
12：Qffmpeg+Qvlc視頻處理。
13：取字模，字符轉LED數據處理。
14：全局日志輸出類 applog，可動態掛載和卸載。
15：全局程序控制類 appkey，可控制程序的使用時間、運行時間、設備數量限制等。
16：封裝百度地圖調用接口，支持設備標注、路線查詢、位置顯示等。
17：自動清理程序早期數據類 cleanapi，傳入要清理的數據庫表名，執行間隔，保留的最大記錄數即可。這樣保證了整個系統存儲的都是最新的數據。
18：NTP校時服務程序。
19：全局截圖處理，可以很方便的直接在ARM上對程序進行截圖。
20：程序存活檢測功能 applive，通過udp通信實時發送心跳命令，這樣可以保證程序7*24小時運行，在ARM上可采用 appdog看門狗程序。
21：已運行時間+當前時間+實時CPU使用率+實時內存使用率等。
22：自定義程序主界面底部信息。
23：Echart圖表的交互使用。