Qt 纯代码模仿 WPS 登录界面

前言:

先看一下 WPS 的登陆界面

多看两遍你会发现他的细节真的很多
比如鼠标 hover 阴影背景
切换的翻页效果

然后我想的是我也实现一下这个大体的效果吧
最后这个翻页动画效果没有实现。。。
我代码都是用 Qpainter 画出来的实在不知道怎么实现翻书动画效果了
QPropertyAnimation 这个类貌似不能给Qpainter 用
各位小伙伴如果有好的实现方法可以在评论区告诉我

下面是我实现的效果时间问题没有美化大体实现了这个效果

支持动态插入页面删除页面不需要修改 painter 部分

项目结构:

main 函数
一个 widget 主界面类
一个 customPainterLabel 类

没有 UI 文件界面都是代码写的

widget.h

#ifndef WIDGET_H
#define WIDGET_H#include "custompainterlabel.h"#include <QWidget>class QLabel;
class QPushButton;namespace Ui {class Widget;
}class Widget : public QWidget
{Q_OBJECTpublic:explicit Widget(QWidget *parent = 0);~Widget();private:QLabel* titleLabel;QPushButton* leftBtn;QPushButton* rightBtn;customPainterLabel* cPainterLabel;
};#endif // WIDGET_H

widget.cpp

#include "widget.h"
#include "ui_widget.h"#include <QLabel>
#include <QPushButton>
#include <QHBoxLayout>
#include <QVBoxLayout>
#include <QSpacerItem>
#include <QDebug>
Widget::Widget(QWidget *parent) :QWidget(parent)
{titleLabel = new QLabel("盗版 WPS Office 账号登录");QFont labelFont;labelFont.setBold(true);labelFont.setPixelSize(22);titleLabel->setFont(labelFont);leftBtn = new QPushButton("<");rightBtn = new QPushButton(">");cPainterLabel = new customPainterLabel();cPainterLabel->setMinimumSize(500,500);QHBoxLayout *hLayout = new QHBoxLayout();hLayout->addWidget(leftBtn,1,Qt::AlignHCenter);hLayout->addWidget(cPainterLabel,5);hLayout->addWidget(rightBtn,1,Qt::AlignHCenter);QVBoxLayout *vLayout = new QVBoxLayout();vLayout->addWidget(titleLabel,1,Qt::AlignHCenter );vLayout->addLayout(hLayout);this->setLayout(vLayout);connect(leftBtn,&QPushButton::clicked,[=](){for(auto i = 0; i < cPainterLabel->getResourceSize();i++){if(cPainterLabel->getResourceIsSelect(i) && i != 0){cPainterLabel->setResourceIsSelect(i,false);cPainterLabel->setResourceIsSelect(--i,true);cPainterLabel->update();}}});connect(rightBtn,&QPushButton::clicked,[=](){for(auto i = 0; i < cPainterLabel->getResourceSize();i++){if(cPainterLabel->getResourceIsSelect(i) && i< cPainterLabel->getResourceSize()-1){cPainterLabel->setResourceIsSelect(i,false);cPainterLabel->setResourceIsSelect(++i,true);cPainterLabel->update();}}});
}Widget::~Widget()
{}

结构是这样的中间的画布是 customPainterLabel 类左边和右边各一个按钮水平布局
这个水平布局和上面的盗版wps label 是垂直布局

就构成了这个样子

上面的两个点击按钮的信号槽是 Lambda 表达式形式
实现的内容就是切换页面

customPainterLabel.h

#ifndef CUSTOMPAINTERLABEL_H
#define CUSTOMPAINTERLABEL_H#include <QObject>
#include <QLabel>struct Resource
{QColor backgroundColor;bool isSelect;int ellipseRadius;QColor ellipseSelectColor;QColor ellipseColor;Resource(){backgroundColor = Qt::black;ellipseSelectColor = Qt::blue;ellipseColor = Qt::gray;isSelect = false;ellipseRadius = 5;}
};class customPainterLabel : public QLabel
{public:customPainterLabel();inline bool getResourceIsSelect(int index){if(index < 0 || index >= m_resourceVec.size())return false;return m_resourceVec.at(index).isSelect;}inline void setResourceIsSelect(int index,bool state){if(index < 0 || index >= m_resourceVec.size())return;m_resourceVec[index].isSelect = state;}inline int getResourceSize()const{return m_resourceVec.size();}protected:void paintEvent(QPaintEvent *e) override;void drawEllipseList(QPainter *p,int centerX,int centerY);void drawBackgroundList(QPainter *p,QRect rect);
private:QVector<Resource> m_resourceVec;
};#endif // CUSTOMPAINTERLABEL_H

customPainterLabel.cpp

#include "custompainterlabel.h"#include <QPainter>
#include <QPaintEvent>
#include <QDebug>#define ELLIPSE_SPACE 30
customPainterLabel::customPainterLabel()
{Resource r1;r1.backgroundColor = Qt::red;Resource r2;r2.backgroundColor = Qt::green;Resource r3;r3.backgroundColor = Qt::blue;Resource r4;r4.backgroundColor = Qt::black;r4.isSelect = true;Resource r5;r5.backgroundColor = Qt::magenta;m_resourceVec<< r1 << r2 << r3 << r4 << r5 ;
}void customPainterLabel::paintEvent(QPaintEvent *e)
{QPainter p(this);auto w = this->width();auto h = this->height();p.save();drawEllipseList(&p,w/2,h - h/10);drawBackgroundList(&p,QRect(w/2 -180,h/2-180,360,360));p.restore();p.setPen(QPen(Qt::black));p.drawRect(0,0,this->rect().width()-2,this->rect().height()-2);
}void customPainterLabel::drawEllipseList(QPainter *p, int centerX, int centerY)
{int size = m_resourceVec.size();if(size <= 0)return;int startX = centerX - (size / 2) * ELLIPSE_SPACE;for(auto i = 0; i< size;i++){if(m_resourceVec.at(i).isSelect)p->setBrush(QBrush(m_resourceVec.at(i).ellipseSelectColor));elsep->setBrush(QBrush(m_resourceVec.at(i).ellipseColor));p->drawEllipse(QPoint(startX + i * ELLIPSE_SPACE,centerY),m_resourceVec.at(i).ellipseRadius,m_resourceVec.at(i).ellipseRadius);}update();
}void customPainterLabel::drawBackgroundList(QPainter *p, QRect rect)
{int size = m_resourceVec.size();if(size <= 0)return; 先找到被选中的那个 然后画出来int isSelectedIndex = -1;for(auto i = 0; i < size; i++){if(m_resourceVec.at(i).isSelect){isSelectedIndex = i;p->setBrush(QBrush(m_resourceVec.at(i).backgroundColor));p->drawRect(rect);}} 依次从中间画左边的for(auto i = isSelectedIndex-1,j = 1; i >=0; i--,j++){p->setBrush(QBrush(m_resourceVec.at(i).backgroundColor));int startX = rect.topLeft().x() - 20 * j;int startY = rect.topLeft().y() + 20 * j;p->drawRect(startX,startY,20,rect.height() - 40 * j);} 依次从中间画右边的for(auto i = isSelectedIndex+1,j=1; i<size; i++,j++){p->setBrush(QBrush(m_resourceVec.at(i).backgroundColor));int startX = rect.topRight().x() + 20 *(j-1);int startY = rect.topRight().y() + 20 * j;p->drawRect(startX,startY,20,rect.height() - 40 *j);}update();}

Resource 这个结构体就是中间的页面
我现在是给了个背景色可以给图片或者 widget 都可以
时间原因我简单写了下

QVector m_resourceVec; 就是管理页面资源的容器

当想增加页面只需要添加一个进容器
删除页面就减少一个比较方便

画中间的内容用的 paintEvent

主要的两个函数一个是画下面的当前选择的条目

drawEllipseList

另一个就是画中间的 ‘页’

drawBackgroundList

先说第一个

思路就是先判断有几个页面就是几个点
然后找到中间的点比如有6个找到第三个
往前面数3个每个都有间距算出第一个的坐标

然后从第一个位置开始画直到画到最后一个
如果当前页是选中了的就换个颜色

下面的实现思路类似先找到当前选中的页面把他先画出来

然后在找这个选中页面的左边的页面画出来
然后在找这个选中页面的右边的页面画出来

只需要画一小部分就行后面的遮挡了不用画

这里面用到一些数值比如20啊啥的都是间距之类的我也没用宏
写的不规范大家知道就行了

void customPainterLabel::drawBackgroundList(QPainter *p, QRect rect)
{int size = m_resourceVec.size();if(size <= 0)return; 先找到被选中的那个 然后画出来int isSelectedIndex = -1;for(auto i = 0; i < size; i++){if(m_resourceVec.at(i).isSelect){isSelectedIndex = i;p->setBrush(QBrush(m_resourceVec.at(i).backgroundColor));p->drawRect(rect);}} 依次从中间画左边的for(auto i = isSelectedIndex-1,j = 1; i >=0; i--,j++){p->setBrush(QBrush(m_resourceVec.at(i).backgroundColor));int startX = rect.topLeft().x() - 20 * j;int startY = rect.topLeft().y() + 20 * j;p->drawRect(startX,startY,20,rect.height() - 40 * j);} 依次从中间画右边的for(auto i = isSelectedIndex+1,j=1; i<size; i++,j++){p->setBrush(QBrush(m_resourceVec.at(i).backgroundColor));int startX = rect.topRight().x() + 20 *(j-1);int startY = rect.topRight().y() + 20 * j;p->drawRect(startX,startY,20,rect.height() - 40 *j);}update();}

理类上下一步要实现翻页的动画我这没有
我也想不出啥好的实现办法了
大家有好的实现办法可以在评论区告诉我我继续实现一下