C++ Qt 之 QPushButton 好看的样式效果实践

文章目录

- - 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;
};