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

本文介绍了在Qt中自定义按钮样式,包括鼠标悬浮、按下、松开后的视觉效果。提供了设置背景图和通过CSS样式控制的两种方法,并分析了各自的优缺点。通过示例代码展示了如何实现按钮在不同状态下的样式变化。
摘要由CSDN通过智能技术生成

Qt技术学习班开始了,更多精彩、好玩的内容等着你,赶紧报名吧! 群号:655815739


#一、简述

在上一篇 Qt 之 去除窗口部件被选中后的焦点虚线框 中,我们为了去除焦点虚线框,给按钮的样式加上了如下的样式。

QPushButton
{
    background:red;
    border:0px;
}

这样导致鼠标点击按钮之后没有按下凹陷的反馈感觉是没有点击上去似的。


这里写图片描述

上面两个按钮加上了border:0px;去除了边框,点击之后没有凹陷的感觉,而后两个按钮没有加上border:0px;,保留了按钮原始的点击凹陷的感觉,但是为了去除矩形虚线框,我们不得已加上了border:0px;去除了边框,保留了背景色样式。这一篇中我们将自定义按钮 在鼠标 悬浮、按下、松开后的效果

#二、代码之路
关于自定义按钮 在鼠标 悬浮、按下、松开后的效果,一种是设置背景图,主要是需要自己

你可以通过继承QPushButton类,重写其鼠标事件函数,实现该功能。具体步骤如下: 1. 定义一个新的类,继承QPushButton类。 2. 在类中定义一个QRect对象,用于记录按钮边缘区域。 3. 重写鼠标进入和移动事件,判断鼠标是否位于按钮边缘区域,如果是则改变鼠标光标,并显示拉伸效果。 4. 重写鼠标按下和移动事件,判断鼠标是否处于拉伸状态,如果是则根据鼠标移动距离改变按钮大小。 5. 重写鼠标释放事件,结束拉伸状态。 下面给出一个简单的示例代码,实现了上述功能: ``` class ResizableButton : public QPushButton { public: ResizableButton(QWidget *parent = nullptr) : QPushButton(parent) { setCursor(Qt::ArrowCursor); } protected: void enterEvent(QEvent *event) override { QRect rect = edgeRect(); if (rect.contains(mapFromGlobal(QCursor::pos()))) { setCursor(Qt::SizeFDiagCursor); m_isResizing = true; } } void leaveEvent(QEvent *event) override { setCursor(Qt::ArrowCursor); m_isResizing = false; } void mousePressEvent(QMouseEvent *event) override { if (m_isResizing) m_startSize = size(); } void mouseMoveEvent(QMouseEvent *event) override { if (m_isResizing) { QSize delta = event->pos() - m_lastPos; QSize newSize = m_startSize + delta; setFixedSize(newSize); } m_lastPos = event->pos(); } void mouseReleaseEvent(QMouseEvent *event) override { m_isResizing = false; } private: QRect edgeRect() const { int margin = 5; QRect rect = rect().adjusted(margin, margin, -margin, -margin); rect.moveTopLeft(mapToGlobal(rect.topLeft())); return rect; } bool m_isResizing = false; QPoint m_lastPos; QSize m_startSize; }; ``` 在上述代码中,edgeRect()函数用于计算按钮边缘区域,m_isResizing、m_lastPos和m_startSize变量分别记录拉伸状态鼠标最后位置和拉伸开始时的按钮大小。在鼠标移动事件中,根据鼠标移动距离计算新的按钮大小,并调用setFixedSize()函数设置大小。注意,这里使用setFixedSize()函数而不是resize()函数,是为了避免按钮大小超出边缘区域。
评论 19
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值