qt自定义控件1--简单背景窗体示例

一、前言

qt自定义控件要集成到Qt Creator中需保证插件工程与Qt Creator的库版本和编译器版本必须保持一致才行，打开Qt Creator帮助下的About Qt Creator即可查看：

于是我的需要采用MSVC2015编译，且是32位的。
用MSVC2017其实也可以编译（有向下兼容吧，目前测试可以，不知道后面会不会出现问题，最好保证完全一致），但是必须32位才行

二、自定义控件工程创建步骤。

1.新建项目依次选择：其他项目–>Qt4设计师自定义控件：

2.选择编译器

3.下一步控件命名，控件类首字母必须要大写

4.一直点下一步直至完成。

三、演示示例

本次演示的demo效果如下（颜色有点暗，放大看）：

四、自定义控件创建操作步骤

1.先修改自定义控件工程的头文件如下：

自定义控件的类需要在前面加一个QDESIGNER_WIDGET_EXPORT，不加的话可以在designer中加载预览，但是编译工程会出错。

2.然后绘制背景窗体，代码：

#ifndef QGRIDEWIDGET_H
#define QGRIDEWIDGET_H

#include <QWidget>
#include <QtUiPlugin/QDesignerExportWidget>

class QDESIGNER_WIDGET_EXPORT QGrideWidget : public QWidget
{
    Q_OBJECT

public:
    QGrideWidget(QWidget *parent = 0);

protected:
    void paintEvent(QPaintEvent *);

private:
    QString backgroundColor = "#151628"; //背景颜色
    int gridMinSpace = 6;  //背景网格小间隔
    int gridMaxSpace = 60; //背景网格大间隔
    QString gridColor = "#1d2f55";
};

源文件中绘制背景：

void QGrideWidget::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    QPainterPath path;
    path.addRect(QRectF(rect()));
    painter.setOpacity(1);
    painter.fillPath(path, QColor(backgroundColor));

    // Draw background min grid.
    int penSize = 1;
    int gridX = rect().x() + penSize;
    int gridY = rect().y() + penSize;
    int gridW = rect().width() - penSize;
    int gridH = rect().height() - penSize;

    QPen gridPen;
    painter.setOpacity(0.08);
    gridPen.setColor(QColor(gridColor));
    gridPen.setWidth(penSize);
    painter.setPen(gridPen);

    int i = 0;
    while (1) {
        painter.drawLine(QPoint(gridX,i*gridMinSpace),QPoint(gridW,i*gridMinSpace));
        i++;
        if((i*gridMinSpace) > gridH)
            break;
    }
    i = 0;
    while (1) {
        painter.drawLine(QPoint(i*gridMinSpace,gridY),QPoint(i*gridMinSpace,gridH));
        i++;
        if((i*gridMinSpace) > gridW)
            break;
    }

    // Draw background Max grid.
    penSize = 1;
    gridX = rect().x() + penSize;
    gridY = rect().y() + penSize;
    gridW = rect().width() - penSize;
    gridH = rect().height() - penSize;
    gridPen.setWidth(penSize);
    painter.setPen(gridPen);
    painter.setOpacity(0.15);
    i = 0;
    QList<int> gridXListPoint;
    QList<int> gridYListPoint;
    while (1) {
        painter.drawLine(QPoint(gridX,i*gridMaxSpace),QPoint(gridW,i*gridMaxSpace));
        i++;
        gridYListPoint.append(i*gridMaxSpace);
        if((i*gridMaxSpace) > gridH)
            break;
    }
    i = 0;
    while (1) {
        painter.drawLine(QPoint(i*gridMaxSpace,gridY),QPoint(i*gridMaxSpace,gridH));
        i++;
        gridXListPoint.append(i*gridMaxSpace);
        if((i*gridMaxSpace) > gridW)
            break;
    }

    // Draw background "+"
    penSize = 2;
    gridPen.setWidth(penSize);
    painter.setPen(gridPen);
    painter.setOpacity(0.5);
    int margins = 2;
    for(auto pointX : gridXListPoint)
    {
        for (auto pointY : gridYListPoint) {
            painter.drawLine(QPoint(pointX - margins, pointY), QPoint(pointX + margins, pointY));
            painter.drawLine(QPoint(pointX, pointY - margins), QPoint(pointX, pointY + margins));
        }
    }

    QWidget::paintEvent(event);
}

3.然后还要改一个地方，我们的控件定义为一个容器控件，就是相当于QWidget那样可以在内部插入其他控件布局之类的，需要改QGrideWidgetPlugin.cpp下的函数isContainer返回值改为true（默认是false），表示这是一个容器控件：

bool QGrideWidgetPlugin::isContainer() const
{
    return true;
}

4.完成后编译，找到生成目录下的库：

5.复制lib和dll到qt安装目录下的形如：E:\Qt5.12\Tools\QtCreator\bin\plugins\designer的目录下，然后打开Qt Creator，在设计器中就可以看到我们创建的插件了。

五、自定义控件使用

1.将编译好的库（lqgridewidgetplugin.lib和qgridewidgetplugin.dll）以及源文件（QGrideWidget.h）放到要使用的工程下，在pro中包含源文件路径以及加载库，其实就是跟导入三方库的步骤一致：

INCLUDEPATH += $$PWD/3rdparty/qgridewidget/include
LIBS += $$PWD/3rdparty/qgridewidget/lib/qgridewidgetplugin.lib

2.然后就可以从设计器中拖出来直接编译运行了,最后要把动态库考到可执行程序目录才行哦。

六、示例程序

https://download.csdn.net/download/weixin_39541080/15491557