自定义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
}
}