Qt实现可伸缩的侧边工具栏
一直在网上找,发现大多的实现方案都是用一个按钮,按下控制侧边栏的伸缩,但是我想要实现鼠标悬浮在侧边栏的时候就伸出,移开就收缩的功能,也没找到好的参考,所以决定自己实现一个,只在C++代码里面就可以实现了,不需要用到qss。
效果演示
代码也是功能演示Demo,用了显眼的颜色来突出功能。实际用的时候需要继续完善加入到项目中。
实现方法
- 首先看看我的主界面UI
可以看到我就是用了一个水平布局,布局里就放置黄色和红色两个QWidget,然后黄色的作为侧边栏(黄色里面的布局不用管他,只是用来布局侧边栏里面的功能键),然后红色的不会去动他。
- 给黄色的QWidget使用重写悬浮事件来控制伸缩
需要先用到语句给黄色侧边栏开启悬浮事件判断
ui->widget->setAttribute(Qt::WA_Hover, true);
在主窗口类里需要重写两个事件(待会再写具体实现),分别是
protected:
1. bool eventFilter(QObject* obj, QEvent* event);
2. void resizeEvent(QResizeEvent* event);
然后要给黄色侧边栏加载主窗口的事件,才能用到在主窗口类中重写的事件
ui->widget->installEventFilter(this);
- 重写事件,在事件中使用QPropertyAnimation来控制伸缩动画
在主窗口类中先声明一个私有变量QPropertyAnimation* propertyAnimation提供给事件调用。再声明一个布尔值bool sideFlag = true来表示当前侧边栏的伸缩状态。
- 在主窗口构造函数中初始化propertyAnimation:
propertyAnimation = new QPropertyAnimation(ui->widget, "geometry");
propertyAnimation->setEasingCurve(QEasingCurve::InOutQuint);
propertyAnimation->setDuration(200);
- 重写事件resizeEvent:
void QtApplication::resizeEvent(QResizeEvent* event)
{width = ui->widget->width(); //width和height都是主窗口类的私有变量height = ui->centralWidget->height();propertyAnimation->setStartValue(QRect(-1, 0, 10, height)); //参数代表左,上,右,下坐标propertyAnimation->setEndValue(QRect(-1, 0, width, height));
}
这一步是为了重新设置当前窗口下的伸缩的起点和重点位置坐标。这一步是难点:在布局下的widget的长度和宽度都是经过改变的,不在resize事件下重新获取widget的长度和宽度,只会得到最初始的无布局下的widget的长度和宽度,简单的说不是正确的数据,需要在resizeEvent下或者paintEvent下“在程序运行后”“延后地”获取widget的长度和宽度才是正确的尺寸数据。
- 重写事件eventFilter:
bool QtApplication::eventFilter(QObject* obj, QEvent* event)
{if (obj == ui->widget){if (event->type() == QEvent::HoverEnter) //鼠标进入黄色侧边栏中悬浮,正向播动画{propertyAnimation->setDirection(QAbstractAnimation::Forward);propertyAnimation->start();return true;}else if (event->type() == QEvent::HoverLeave) //鼠标离开黄色侧边栏,反向播动画{propertyAnimation->setDirection(QAbstractAnimation::Backward);propertyAnimation->start();return false;}}return QWidget::eventFilter(obj, event);
}
实现逻辑不难,可以理解上述内容后自己写出来就行,最关键的点就是获取widget的width和height一定要准确! 在这点上我摸了很久,后面总算在resizeEvent中成功获取到了准确的数据。