自定义qtquick 插件模块，支持qmldesigner

wmxModule.pro

#-------------------------------------------------
#
# Project created by wmx
#
#-------------------------------------------------QT       += core qml quickTARGET = wmxModule
TEMPLATE = lib
CONFIG += pluginDEFINES += QT_DEPRECATED_WARNINGSSOURCES += \wmxModulePlugin.cppHEADERS += \wmxModulePlugin.hRESOURCES += \Img.qrc \Qml.qrc#---目标路径
#msvc{
#        message("msvc")
#        prefix=msvc
#}#mingw{
#        message("mingw")
#        prefix=mingw
#}message(QT_ARCH : $$QT_ARCH )DESTDIR = $$PWD/../bin/WMX/$${prefix}
message(DESTDIR :$$DESTDIR)# 插件描述文件，copy到插件目录
DISTFILES = qmldir
!equals(_PRO_FILE_PWD_, $$DESTDIR) {copy_qmldir.target = $$system_path($$DESTDIR/qmldir)copy_qmldir.depends = $$system_path($$_PRO_FILE_PWD_/qmldir)message(target:$$copy_qmldir.target)message(depends:$$copy_qmldir.depends)copy_qmldir.commands = $${QMAKE_COPY_FILE} $${copy_qmldir.depends} $${copy_qmldir.target}QMAKE_EXTRA_TARGETS += copy_qmldirPRE_TARGETDEPS += $$copy_qmldir.target
}# 加引号
message(system_quote : $$system_quote(\media\wmx))#转为系统路径，win是\ 分隔,linux 是 / 分隔
message(system_path : $$system_path(\media\wmx))# 系统分隔符
message(QMAKE_DIR_SEP: $$QMAKE_DIR_SEP)

wmxModulePlugin.h

#include class WmxModulePlugin : public QQmlExtensionPlugin
{Q_OBJECTQ_PLUGIN_METADATA(IID QQmlExtensionInterface_iid)
public:void registerTypes(const char *uri) override;
};

WmxModulePlugin

#include "wmxModulePlugin.h"
void WmxModulePlugin::registerTypes(const char *uri)
{//注册资源Q_INIT_RESOURCE(Img);Q_INIT_RESOURCE(Qml);}

自定义 MyControl.qml

import QtQuick 2.0Rectangle {id:rootwidth: 100height: widthradius: width / 2color: "red"border{width: 1color: "yellow"}Image {anchors{centerIn: parentmargins: 5}source: "qrc:/Img/wmx.png"}
}

Img.qrc

Img/wmx.png

Qml.qrc

Qml/Components/MyControl.qml

qmldir

#模块名称,相对importPath下到qmdir路径的点分路径
module WMX
#dll名称
plugin wmxModule
#c++插件类名称
classname WmxModulePlugin
#控件
MyControl 1.0 qml/MyControl.qml
#类型信息
typeinfo plugin.qmltypes
#依赖关系
depends QtQuick 2.0
#支持设计器
designersupported

编译后

在 $$PWD/../bin/WMX/ 路径下：
生成以下文件
libwmxModule.so 、 qmldir

生成类型信息文件 .qmltypes

在此目录打开终端输入命令

qmlplugindump WMX 1.0 ../  >  ./plugin.qmltypes

plugin.qmltypes

import QtQuick.tooling 1.2// This file describes the plugin-supplied types contained in the library.
// It is used for QML tooling purposes only.
//
// This file was auto-generated by:
// 'qmlplugindump WMX 1.0 ../'Module {dependencies: ["QtQuick 2.0"]Component {prototype: "QQuickRectangle"name: "MyControl 1.0"exports: ["MyControl 1.0"]exportMetaObjectRevisions: [0]isComposite: truedefaultProperty: "data"}
}

生成 qmldesigner 支持

在模块路径 $$PWD/../bin/WMX/ 下：
新建目录 designer 、 qml

支持属性识别、编辑

把 MyControl.qml 放到 qml目录下,这样qmldesigner 根据 qmldir 声明找到此文件,支持属性识别、编辑

支持 qmldesigner 视图Library 模块识别 ，控件缩略图标

在 designer 目录下：
1 新建 images目录，放缩略图标
2 新建 plugin.metainfo 文件，编辑以下内容：

MetaInfo {Type {#名称name: "WMX.MyControl"#缩略图icon: "images/wmx.png"ItemLibraryEntry {#控件名称name: "MyControl"#控件分类category: "WMX-Base"#分类图标libraryIcon: "images/wmx.png"#版本version: "1.0"#导入的模块requiredImport: "WMX"#默认属性Property { name: "width"; type: "int"; value: 50}Property { name: "height"; type: "int"; value: 50}}}
}

使用插件

testModule.pro

QT += quick
CONFIG += c++11DEFINES += QT_DEPRECATED_WARNINGS
SOURCES += \main.cppRESOURCES += qml.qrc#目标路径
DESTDIR = $$PWD/../binMODULE_PATH=$$PWD/../bin/
QML_IMPORT_PATH = $$MODULE_PATH
QML2_IMPORT_PATH = $$MODULE_PATH
## Additional import path used to resolve QML modules just for Qt Quick Designer
QML_DESIGNER_IMPORT_PATH +=  $$MODULE_PATH

main.cpp

#include 
#include 
#include 
#include int main(int argc, char *argv[])
{// 查看qml调试信息qputenv("QML_IMPORT_TRACE","1");QLoggingCategory::setFilterRules("qt.quick.controls.style=true");QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);QGuiApplication app(argc, argv);QQmlApplicationEngine engine;//查看导入路径qDebug()<<"engine.importPathList : \n"<if (!obj && url == objUrl)QCoreApplication::exit(-1);}, Qt::QueuedConnection);engine.load(url);return app.exec();
}

main.qml

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Window 2.12import WMX 1.0Window {id: rootvisible: truewidth: 800height: 600title: qsTr("Hello window")Button {id: buttonx: 294y: 199text: qsTr("Button")}MyControl {id: myControlx: 50y: 68width: 200height: 200scale: 1}}

可以点设计器，拖拽模块，设置属性，预览等等