Qt 之按钮鼠标 悬浮、按下、松开后的效果

简介

• 本文介绍了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设计理念；
• 第二种方法和第三种方式更具有灵活性，但难度也相对较大，这两种方法常用来实现一些更特殊的按钮操作。