先来看看实现效果

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

设计思路

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

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

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

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

在上面说的说的这几种实现方法中我是偏向于利用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 

//自定义桌面图标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 

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))
           << qgradientstop1.0 qcolor0 0 0 100 grad.setstopsgs 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/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]；