Qt组件库之桌面图标系统实现

大家好，欢迎来到IT知识分享网。

先来看看实现效果

之前效果都放在最后，是不是大家不看到最后就走了，￣□￣｜｜，所以打算以后就先放效果在写实现方法。

设计思路

上篇文章中已经实现了组件库的基本窗口框架，之后我就在想怎么进行组件的展示呢？构思了几种实现方法：

通常的做法，就是在窗口上放置一个又一个的按钮，点击一个按钮就弹出一个组件窗口。然后为了美观一点，不能只用纯文字的按钮，而可以使用QToolButton，并为其添加图标和文字，最终效果就类似于大部分软件上的工具栏。

或者进阶一点呢可以使用QTabWidget或者QToolBox对控件进行分类，然后在每个Tab页或者抽屉中对该类控件进行展示，而且Tab页也可以进行美化，最典型的Tab页可以参考360的程序，真的是你想要的的Tab页它里面都有：

至于典型的抽屉窗口就像里面的好友列表或者音乐软件中的歌单：

在上面说的说的这几种实现方法中我是偏向于利用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 <QGraphicsItem> #include <QPainter> #include <QRectF> #include <QPainterPath> //自定义桌面图标Item class 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 <QStyleOptionGraphicsItem> 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); //添加图标Item m_pIconWidget[0] = new IconWidget(":/Images/.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]；