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

news2025/7/9 0:26:00

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

wmxModule.pro

#-------------------------------------------------
#
# Project created by wmx
#
#-------------------------------------------------

QT       += core qml quick

TARGET = wmxModule
TEMPLATE = lib
CONFIG += plugin

DEFINES += QT_DEPRECATED_WARNINGS

SOURCES += \
        wmxModulePlugin.cpp

HEADERS += \
        wmxModulePlugin.h

RESOURCES += \
    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_qmldir
    PRE_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 <QQmlExtensionPlugin>

class WmxModulePlugin : public QQmlExtensionPlugin
{
    Q_OBJECT
    Q_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.0

Rectangle {
    id:root
    width: 100
    height: width
    radius: width / 2
    color: "red"
    border{
        width: 1
        color: "yellow"
    }

    Image {
        anchors{
            centerIn: parent
            margins: 5
        }
        source: "qrc:/Img/wmx.png"
    }
}

Img.qrc

<RCC>
    <qresource prefix="/wmx"/>
    <qresource prefix="/">
        <file>Img/wmx.png</file>
    </qresource>
</RCC>

Qml.qrc

<RCC>
    <qresource prefix="/control">
        <file>Qml/Components/MyControl.qml</file>
    </qresource>
</RCC>

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: true
        defaultProperty: "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++11

DEFINES += QT_DEPRECATED_WARNINGS
SOURCES += \
        main.cpp

RESOURCES += qml.qrc

#目标路径
DESTDIR = $$PWD/../bin

MODULE_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 <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QDebug>
#include <QLoggingCategory>

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"<<engine.importPathList();

    const QUrl url(QStringLiteral("qrc:/main.qml"));
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
                         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.12

import WMX 1.0


Window {
    id: root
    visible: true
    width: 800
    height: 600
    title: qsTr("Hello window")


    Button {
        id: button
        x: 294
        y: 199
        text: qsTr("Button")
    }

    MyControl {
        id: myControl
        x: 50
        y: 68
        width: 200
        height: 200
        scale: 1
    }

}