javascript option 菜单图标_Qt组件库之桌面图标系统实现

先来看看实现效果

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

设计思路

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

通常的做法，就是在窗口上放置一个又一个的按钮，点击一个按钮就弹出一个组件窗口。然后为了美观一点，不能只用纯文字的按钮，而可以使用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 //自定义桌面图标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]；