文章目录
- 1.前序
- 2.效果演示
- 3.代码如下
1.前序
启发于 edge 更新 web 页面,觉得人家做的体验挺好
决定在Qt实现,方便以后使用
2.效果演示
特性介绍:
- 默认蓝色
- 鼠标移入 渐变色,鼠标变为
小手
- 鼠标移出 恢复蓝色,鼠标恢复
箭头
- 鼠标点击 墨绿色
- 鼠标按下并移出 灰色 | 标识取消
演示 GIF:
实际 hover 效果:
3.代码如下
#include <QWidget>
#include <QDebug>
#include <QPushButton>
#include <QMouseEvent>
#include <QVBoxLayout>const static QString BtnNormalStyleSheet = "QPushButton {"" background-color: #29B5D5;" // Default blue background" color: white;" // White text" border-radius: 5px;" // Rounded corners" width:200px;"" height:50px;"" font-weight: bold;"" font-size: 20px;"" padding: 0px 0px;" // Adjust padding"}""QPushButton:hover {"" background-color: qlineargradient("" spread:pad, x1:0.6, y1:0, x2:0, y2:0.8, " // Top to bottom gradient" stop:0 #29B5D5, stop:1 #01FFFF" // Lighter blue to default blue" );""}""QPushButton:pressed {"" background-color: #1B788E;" // Darker blue when pressed"}";
const static QString BtnPressedMoveOutside = "QPushButton {"" background-color: #474747;" // Default blue background" color: white;" // White text" border-radius: 5px;" // Rounded corners" width:200px;"" height:50px;"" font-weight: bold;"" font-size: 20px;"" padding: 0px 0px;" // Adjust padding"}";class CustomButton : public QPushButton {Q_OBJECT
public:explicit CustomButton(const QString& text, QWidget* parent = nullptr): QPushButton(text, parent) {setMouseTracking(true);setStyleSheet( BtnNormalStyleSheet );}protected:void enterEvent(QEvent* event) override {setCursor(Qt::PointingHandCursor); // Change to hand cursorQPushButton::enterEvent(event);}void leaveEvent(QEvent* event) override {unsetCursor(); // Revert to the default cursorQPushButton::leaveEvent(event);}void mouseReleaseEvent(QMouseEvent* event) override {qDebug() << "mouseReleaseEvent";isPressed = false;if (isMouseOutside) {setStyleSheet( BtnNormalStyleSheet );}QPushButton::mouseReleaseEvent(event);}void mousePressEvent(QMouseEvent* event) override {qDebug() << "mousePressEvent";isPressed = true;QPushButton::mousePressEvent(event);}void mouseMoveEvent(QMouseEvent* event) override {qDebug() << "mouseMoveEvent" << isPressed;if (isPressed ) {if (!rect().contains(event->pos())) {isMouseOutside = true;setStyleSheet( BtnPressedMoveOutside ); // Mouse has moved outside the button, change to black} else {isMouseOutside = false;setStyleSheet( BtnNormalStyleSheet );}}QPushButton::mouseMoveEvent(event);}
private:bool isPressed = false;bool isMouseOutside = false;
};