先来看看实现效果
之前效果都放在最后,是不是大家不看到最后就走了, ̄□ ̄||,所以打算以后就先放效果在写实现方法。
![f3a284bf87a09419140a245d41f11a08.gif](https://i-blog.csdnimg.cn/blog_migrate/d9f1328403fea16bf3fafe253e23eb14.gif)
设计思路
上篇文章中已经实现了组件库的基本窗口框架,之后我就在想怎么进行组件的展示呢?构思了几种实现方法:
通常的做法,就是在窗口上放置一个又一个的按钮,点击一个按钮就弹出一个组件窗口。然后为了美观一点,不能只用纯文字的按钮,而可以使用QToolButton,并为其添加图标和文字,最终效果就类似于大部分软件上的工具栏。
![a28c6f1d5e3e62ebb9742d4ad73ed9f7.png](https://i-blog.csdnimg.cn/blog_migrate/b6e9b73a88600ec2ae25a751a40fe872.jpeg)
或者进阶一点呢可以使用QTabWidget或者QToolBox对控件进行分类,然后在每个Tab页或者抽屉中对该类控件进行展示,而且Tab页也可以进行美化,最典型的Tab页可以参考360的程序,真的是你想要的的Tab页它里面都有:
![1f2e435430c70ac101d8c3e3ed0bdc9c.png](https://i-blog.csdnimg.cn/blog_migrate/bd316b2c4d78de79911e31c40e4dda88.jpeg)
![ec52b137596ab3fbb932d7b60d01c606.png](https://i-blog.csdnimg.cn/blog_migrate/774f882c7d1b61620aff526cd142a335.jpeg)
至于典型的抽屉窗口就像QQ里面的好友列表或者音乐软件中的歌单:
![5690e3755b46c6a81a762faf43625e1f.png](https://i-blog.csdnimg.cn/blog_migrate/e85037249f0239d48ba0dfe85d4fe0c5.jpeg)
在上面说的说的这几种实现方法中我是偏向于利用Tab窗口实现的,然后就在我盯着电脑桌面发呆的时候,突然意识到电脑桌面不正是一个最普遍、最典型、使用最多的展示窗口吗?不管是应用、文件、音乐、视频在桌面上展示的不就是不同的图标和文字说明吗?展示组件不也可以使用这种方法,而且桌面图标还可以自由移动,随意摆放、自动排列、交互等,这也比上面说的几种方法更加灵活,因此最终敲定,展示窗口就按照系统桌面窗口的效果进行实现。
怎么实现?
既然已经有了既定的目标,那么我们该怎么实现呢?窗口、自由移动、交互......首先想到的就是图形视图框架,它可以满足我们当前的所有需求。在之前我们实现的窗口框架中添加一个图形视图窗口其实很简单,基本功能只需要几行代码,实现如下:
m_pScene = new QGraphicsScene;m_pScene->setSceneRect(-500,-500,1000,1000);m_pView = new QGraphicsView(m_pScene);m_pView->centerOn(0,0);m_pView->resize(2000, 2000);
创建完以后,将m_pView布局到主窗口中即可。当然了此时我们只实现了Scene和View,还没有往场景中添加Item。桌面中的Item其实就是桌面图标了,它包含一个图标、文字说明、选择状态,点击响应以及右键菜单等,当然我们不可能一下子全都实现,今天我们先来实现图标和选择状态的功能。Qt自带的Item中没有适合我们需求的,那么我们就只能自己继承QGraphicsItem进行自定义实现。
自定义Item下面最基本的两个函数是必须实现的:
QRectF boundingRect() const;void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget);
然后我们还可以选择是否实现shape函数,当然对于我们桌面图标来说我感觉是不需要实现的,就用默认的即可,不过我还是重写了一下......
之后我们要在Item上添加一张图片,并负责图片的绘制工作,该工作在paint函数中实现即可。至于选择状态,其实QGraphicsItem本身就可以设置可选,我们只需要在检测到选中时,为其绘制一个不同的显示效果即可。例如显示一个虚线框,出现背景透明等,甚至还可以添加动画,鼠标悬浮时,Item变大,鼠标移动时,Item变小,鼠标点击时,Item抖动等。动画我还没有添加,打算等基本功能都实现了再添加,先来看看基本功能是怎么实现的吧:
//IconWidget.h#include #include #include #include //自定义桌面图标Itemclass IconWidget : public QGraphicsItem{public: IconWidget(QString strImagePath); QRectF boundingRect() const; void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget); QPainterPath shape() const;private: QImage m_qImage;};
#include "IconWidget.h"#include "MyType.h"#include IconWidget::IconWidget(QString strImagePath){ //加载图片 m_qImage.load(strImagePath); setZValue(0); setAcceptDrops(true); //设置Item可选和可移动 setFlags(ItemIsSelectable | ItemIsMovable);}QRectF IconWidget::boundingRect() const{ //这个设置相当于把item相对于自身的坐标系的原点(0,0)放到自己的正中央 return QRectF(-ICON_WIDTH/2, -ICON_HEIGHT/2, ICON_WIDTH, ICON_HEIGHT).adjusted(-1, -1, 1, 1);}QPainterPath IconWidget::shape() const{ QPainterPath path; path.addRect(QRectF(-ICON_WIDTH/2, -ICON_HEIGHT/2, ICON_WIDTH, ICON_HEIGHT)); return path;}void IconWidget::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget){ Q_UNUSED(widget); //选中时 if(option->state & QStyle::State_Selected) { //绘制虚线框 painter->setPen(QPen(Qt::blue, 1, Qt::DotLine)); QRectF rect = QRectF(-ICON_WIDTH/2, -ICON_HEIGHT/2, ICON_WIDTH, ICON_HEIGHT).adjusted(-1, -1, 1, 1); painter->drawRect(rect); //绘制透明背景 QLinearGradient grad(rect.topLeft(), rect.bottomRight()); QGradientStops gs; gs << QGradientStop(0.0, QColor(0, 0, 0 , 100)) << QGradientStop(0.5, QColor(0, 0, 0, 100)) << QGradientStop(1.0, QColor(0, 0, 0, 100)); grad.setStops(gs); painter->setOpacity(0.5); painter->fillRect(rect, grad); } //绘制图片 painter->drawImage(boundingRect().adjusted(5, 5, -5, -5), m_qImage); //绘制边框的方法,有点丑,不使用 //painter->drawRect(QRectF(-ICON_WIDTH/2, -ICON_HEIGHT/2, ICON_WIDTH, ICON_HEIGHT));}
如何使用自定义的Item呢?
其实很简单,使用方法如下:
m_pScene = new QGraphicsScene;m_pScene->setSceneRect(-500,-500,1000,1000);m_pView = new QGraphicsView(m_pScene);m_pView->setMouseTracking(true);m_pView->centerOn(0,0);//添加图标Itemm_pIconWidget[0] = new IconWidget(":/Images/QQ.png");m_pScene->addItem(m_pIconWidget[0]); //将Item加入到Scene中m_pIconWidget[0]->setPos(-3*66, 0); //设置初始位置m_pIconWidget[1] = new IconWidget(":/Images/WeChat.png");m_pScene->addItem(m_pIconWidget[1]);m_pIconWidget[1]->setPos(-2*66, 0);m_pView->resize(2000, 2000);
我这里为了省事就用了数组,后面我再想想怎么优化,再将创建和布局Item封装一下。
IconWidget* m_pIconWidget[10];
![95ca0d4890ce6116e176aeb7925f7893.png](https://i-blog.csdnimg.cn/blog_migrate/f6f93f18ffca82aff77b3aabb49471cc.jpeg)