简介

• 本文介绍了Qt中的按钮实现响应鼠标悬浮、按下、松开后的效果，在三种状态下，按钮改变不同的背景图片。

• 方式1：通过修改样式表的方式去实现；

• 方式2：通过继承QPushButton去实现一个自定义的按钮；

• 方式3：在主界面中给按钮安装事件过滤器的方式去实现

方式1：通过修改样式表的方式去实现

• 这里尽量不要有中文注释，我这里注释后就达不到想要的效果
• 这个是修改myBtn父类的样式表

// 默认显示的图片
QPushButton#myBtn
{border-image:url(:/fly1.png);
}
// 进入显示的图片
QPushButton#myBtn:hover
{border-image:url(:/fly2.png);
}
// 按下显示图片
QPushButton#myBtn:pressed
{border-image:url(:/fly3.png);
}

方式2：通过继承QPushButton去实现一个自定义的按钮；

继承QPushButton类后，重写了event()方法

bool MyPushButton::event(QEvent *event)
{switch (event->type()){case QEvent::Enter:this->setIcon(QIcon(":/icons/images/c.png"));break;case QEvent::Leave:this->setIcon(QIcon(":/icons/images/c1.png"));break;case QEvent::MouseButtonPress:this->setIcon(QIcon(":/icons/images/暂停.png"));break;case QEvent::MouseButtonRelease:this->setIcon(QIcon(":/icons/images/c1.png"));break;default:break;}return QPushButton::event(event);
}

方式3：在主界面中给按钮安装事件过滤器的方式去实现

• 注意这里先要给控件注册事件处理器
• 重写事件过滤器

MainWindow::MainWindow(QWidget *parent) :QMainWindow(parent),ui(new Ui::MainWindow)
{ui->setupUi(this);// 给控件注册事件过滤器ui->myBtn->installEventFilter(this);
}MainWindow::~MainWindow()
{delete ui;
}bool MainWindow::eventFilter(QObject *obj, QEvent *event)
{switch (event->type()) {case QEvent::HoverEnter:if(obj == ui->myBtn)ui->myBtn->setIcon(QIcon(":/fly1.png")); // 按钮进入break;case QEvent::HoverLeave:if(obj == ui->myBtn)ui->myBtn->setIcon(QIcon(":/fly2.png")); // 按钮离开，恢复默认break;case QEvent::MouseButtonPress:if(obj == ui->myBtn)ui->myBtn->setIcon(QIcon(":/fly3.png")); // 按钮按下break;case QEvent::MouseButtonRelease:if(obj == ui->myBtn)ui->myBtn->setIcon(QIcon(":/fly4.png")); // 按钮松开break;default:break;}return QWidget::eventFilter(obj, event);
}

总结

• 三种方式都能实现一个按钮在悬浮、按下、松开后显示不同的背景图片的效果。
• 其中第一种方式实现起来最为简单，如果仅仅是按钮外观的切换，采用该方法最为合理，符合MVC设计理念；
• 第二种方法和第三种方式更具有灵活性，但难度也相对较大，这两种方法常用来实现一些更特殊的按钮操作。