2023年7月3日发(作者：)

qtdesigner⾃定义插件找不到指定的模块_Qml组件化编程10-⾃定义Quick模块⽬录(放个⽬录⽅便⼤家预览。破乎不⽀持⽬录，这个⽬录是从博客复制过来的，点击跳转到博客)简介近期讯息Qt Design StudioTaoQuickQt资源管理qrc内容编译和加载qrc资源的引⽤插件中注册资源Qml模块qmldir⽂件⽰例不⽤开放Qml源码Designer⽀持metainfo带资源的组件，需要⽤C++扩展注册资源安装最简Demo简介本⽂是《Qml组件化编程》系列⽂章的第⼗篇，涛哥将教⼤家，Qml⾃定义模块的知识。特别是最近的研究结果：如何让Qml模块在Designer中拖拽使⽤。涛哥希望有更多的⼈学会这个技能。注：⽂章主要发布在涛哥的博客 和 涛哥的知乎专栏-Qt进阶之路近期讯息(先播点新闻)Qt Design Studio2019年5⽉20的时候，Qt官⽅放出了Qt Design Studio的1.2 beta版， 免费使⽤/暂不开源。下载地址在这：Qt Design Studio是主要给美⼯使⽤的⼀款UI⼯具。Qt在Photo Shop/Sketch这两款⼯具中，提供了QtBridge插件，可以将设计好的资源直接导出成Qml⼯程。导出的⼯程可以⽤Qt Design Studio/QtCreator打开，⽤拖拖拽拽的⽅式，实现各种功能、动画等等。QtDesignStudio⽬前还不成熟，但未来是⼀⽚光明。等Designer做好了，就不再需要⼿写Qml代码，拖拖拽拽就能搞定界⾯部分。只剩下逻辑处理和后端功能才需要写代码/写js脚本。Qt Design Studio⽬前与QtCreator的差异是，前者内置了⼀些特殊的模块：包括 Shapes图元、Effects等，Qt Design Studio还使⽤了qmlproject⽂件作为⼯程管理。除此之外，功能都是⼀样的。帧动画编辑器在QtCreator中也是可以使⽤的。TaoQuick最新的TaoQuick (tag: 0.1.6), 已经⽀持在QtCreator中拖拽使⽤了代码仓库在这：TaoQuick(下⾯进⼊正题)Qt资源管理(有必要先说⼀下资源管理，这部分内容帮助⽂档都有，搜索关键词为”rcc” 或 “Qt Resource”)Qt提供了⼀个资源管理⼯具rcc，可以将各种资源⽂件压缩、打包进⼆进制程序。通常⽤来打包各种图⽚、Qml⽂件、配置⽂件或数据⽂件等等，只要将资源⽂件添加到qrc⽂件中即可。qrc⽂件是xml格式的⽂本⽂件，⾥⾯记录着添加的各种资源。qrc内容⽰例 : images/ images/ images/ images/ images/ images/ 编译和加载qrc只要在pro⽂件中写上 RESOURCES = 就可以了。qmake会⾃动将资源压缩、打包进exe/dll程序也可以使⽤命令⾏⼿动编译：rcc -binary -o 或者rcc -binary -o 这种⽅式编译出来的，是⼀个纯粹的资源插件，扩展名写什么都⽆所谓的。可以在代码中动态加载资源、卸载资源 QResource::registerResource("/path/to/"); QResource::unRegisterResource("/path/to/");资源的引⽤使⽤”:/“ 或者 “qrc:/“开头的路径即可，这两者的区别涛哥未作总结，⼤家⾃⼰实践吧。 cutAct = new QAction(QIcon(":/images/")插件中注册资源在Qt插件中，添加了资源的情况下，需要⽤宏Q_INIT_RESOURCE来注册资源(Qt插件和前⾯的rcc编译出来的不⼀样，不是⼀个纯粹的资源插件，不能直接被QResource::registerResource识别) TaoClass::TaoClass() : BaseClass() { Q_INIT_RESOURCE(TaoResource); QFile file(":/images/"); ... }Qml模块(这部分内容帮助⽂档也有，搜索关键词”QML Modules”)设计Qml模块的⼤致步骤如下：1. 实现Qml组件2. 实现qmldir⽂件3. 导出Qml插件类如果要⽀持designer，还要加上⼀步：1. 创建designer⽂件夹，编写metainfo⽂件这⼀步暂时没有任何⽂档和⼯具，涛哥照猫画虎做出来的。以后⽂档肯定会出来的，现在有些功能不完善。(参考Qt的⽀持Designer的Qml模块。更深⼊的了解，在QtCreator源码)qmldir⽂件(帮助⽂档搜索关键词 “qmldir” 或 “Module Definition qmldir…”)⽰例这⾥以TaoQuick中的为例，我顺⼿加了点注释：TaoQuick/TaoQuick/qmldir:#模块名称 import使⽤的地⽅，就⽤这个名称module TaoQuick#插件dll⽂件名称，即 gin TaoQuick#依赖的模块depends QtQuick 2.12depends ls 2.12# 这⾥⼀堆的组件TGradientBtn 1.0 BasicComponent/Button/ageBtn 1.0 BasicComponent/Button/gTextBtn 1.0 BasicComponent/Button/xtBtn 1.0 BasicComponent/Button/veArea 1.0 BasicComponent/Mouse/ansArea 1.0 BasicComponent/Mouse/rmalProgress 1.0 BasicComponent/Progress/rcleProgress 1.0 BasicComponent/Progress/syIndicator 1.0 BasicComponent/Others/agItem 1.0 BasicComponent/Others/sizeBorder 1.0 BasicComponent/Others/olTip 1.0 BasicComponent/Others/alog 1.0 BasicComponent/Others/pup 1.0 BasicComponent/Others/S 1.0 BasicComponent/Others/# ⽀持designerdesignersupported还有单例singleton、内部类型internal、C++类型描述typeinfo， 这些⽤法TaoQuick没有⽤到，就不多说了。plugin TaoQuick这⼀句，表⽰对应的dll⽂件名称。dll是要写⼀个C++类，继承⾃QQmlExtensionPlugin看⼀下TaoQuick中的实现//taoquick_plugin.h#pragma once#include class TaoQuickPlugin : public QQmlExtensionPlugin{ Q_OBJECT Q_PLUGIN_METADATA(IID QQmlExtensionInterface_iid)public: void registerTypes(const char *uri) override;};//taoquick_#include "taoquick_plugin.h"void TaoQuickPlugin::registerTypes(const char *uri){ Q_UNUSED(uri); Q_INIT_RESOURCE(Qml); //注册}运⾏时候的bin路径⽂件结构是这样的:TaoQuick⽂件夹的名字就是模块名字不⽤开放Qml源码这⾥说⼀下，TaoQuick项⽬中还有⼀个qmldir⽂件：TaoQuick/TaoQuick/Qml/qmldir:TGradientBtn 1.0 BasicComponent/Button/ageBtn 1.0 BasicComponent/Button/gTextBtn 1.0 BasicComponent/Button/xtBtn 1.0 BasicComponent/Button/veArea 1.0 BasicComponent/Mouse/ansArea 1.0 BasicComponent/Mouse/rmalProgress 1.0 BasicComponent/Progress/rcleProgress 1.0 BasicComponent/Progress/syIndicator 1.0 BasicComponent/Others/agItem 1.0 BasicComponent/Others/sizeBorder 1.0 BasicComponent/Others/olTip 1.0 BasicComponent/Others/alog 1.0 BasicComponent/Others/pup 1.0 BasicComponent/Others/S 1.0 BasicComponent/Others/这⾥⾯module、plugin这些东西都没有，只有组件。⽽且这个⽂件是加⼊了qrc的，即编译进dll⾥⾯了。前⾯那个qmldir，需要和dll放在同级⽬录，dll模块才能被Qml引擎导⼊。后⾯这个qmldir的作⽤是，导出dll插件时，不⽤带上qml源码，直接import 这个qmldir的资源路径，就能够⽤⾥⾯的组件了。也就是说，使⽤的地⽅，要写两句importimport TaoQuick 1.0import "qrc:/Tao/Qml/"这种⽤法不能在QtCreator⾼亮，运⾏没问题。（商业版似乎有更⾼级的资源内建功能，或许可以⽀持⾼亮，后续再研究）具体的实现和⽤法，可以参考TaoQuick 或者⽂末的最简Demo。TaoQuick中的qmake语法，可以参考另⼀篇⽂章 Designer⽀持再看⼀下效果：要⽀持Designer，需要以下步骤：⾸先要在Qml路径下，创建⼀个designer⽂件夹。必须叫这个名字其次要放⼀个扩展名为.metainfo的⽂件，⾥⾯按格式写上组件信息。名字似乎没有要求。最后，将整个Qml⽂件夹拷贝到[QTDIR]/qml/路径下，并把⽂件夹名字改成模块名字。TaoQuick项⽬的路径是这样的：metainfometainfo⽂件，⽬前没有⽂档、没有⾃动⽣成⼯具，只能⼿动写，语法和qml语法类似。(可以参考QtCreator源码，⾥⾯有完整的解析器)MetaInfo { Type { name: "entBtn" icon: "images/" ItemLibraryEntry { name: "TGradientBtn" category: "TaoQuick - Buttons" libraryIcon: "images/" version: "1.0" requiredImport: "TaoQuick" Property { name: "width"; type: "int"; value: 120 } Property { name: "height"; type: "int"; value: 80 } } }}顶层MetaInfo为固定写法接下来⼀个Type就对应Designer中的⼀个可拖拽的组件：* name应该算作Qml组件⽂件的路径，路径分隔符⽤"点"， 路径默认从[QTDIR]/qml开始，如果有⾃定义qml 导⼊路径，应该可以从相应的路径开始查找（未尝试）。* icon 就是⼩图标了，⽤来在Designer界⾯上预览。这⾥的images路径，默认从designer⽂件夹开始ItemLibraryEntry 是对这个组件更详细的描述：* name 显⽰在Designer上⾯的名字* category 分组的名字* libraryIcon ⼩图标，和前⾯那个⼀样（不懂有什么区别，先照抄）* version 版本 （TaoQuick都是1.0）* requiredImport 必要的导⼊的模块* Property 属性。就是可以在Designer中调整、做帧动画的。Property⽀持的关键字有 name type value三个。 type 的值，暂时没有完整的⽀持列表，源码⾥⾯能翻到Qml的基础类型[“boolean”,“int”, “real”, “string”, “url”, “color”], Qt发⾏的Qml中，还能看到”binding”。()属性这⾥，应该是QtCreator还没有开发完整。Qml组件，metainfo⾥什么属性都不写，Designer⾥⾯⼀个属性都看不到。就写⼀个width属性，其它的属性也⾃动给列出来了。但是Color这种，即使写了color，还是按照binding字符串处理的，不能⽤颜⾊选择器改颜⾊。只能等QtCreator后续版本了。Qt⾃带的Rectangle⼀类，是从C++⾥⾯写的，Color属性是可以⽤颜⾊选择器的。Qt⾃带的Qml组件Color属性也是按binding处理的。带资源的组件，需要⽤C++扩展注册资源前⾯⽰例那个FPS组件，⽤到了⼀张图⽚。图⽚资源要么和Qml⽂件放⼀起，⽤”file:///./“的⽅式访问，要么放进资源⾥，⽤C++注册。所以在前⾯的TaoQuick安装路径中，有⼀个dll⽂件。C:Qt5.12.3msvc2017_然后封装这个组件的时候，还要再import⼀下, 即import TaoQuick 1.0图⽚路径就⽤资源路径//ort QtQuick 2.12import ls 2.12import TaoQuick 1.0Item { property int fps: 60 property int frameCount: 0 property color textColor: "#f7e08c" Image { id: spinner source: "qrc:/Core/Image/Others/" width: 32 height: 32 alCenter: alCenter : RotationAnimation on rotation { from: 0 to: 360 running: true loops: te duration: 1000 } onRotationChanged: frameCount++ } Text { : alCenter: alCenter text: "FPS" + fps ize: 20 renderType: Rendering color: textColor } Timer { interval: 1000 repeat: true running: true onTriggered: { fps = frameCount frameCount = 0 } }}安装可以⼿动拷贝⽂件夹，也可以参考TaoQuick的⾃动化安装。⼀⽂中已经说过了只要增加⼀个pri⽂件，再执⾏make install即可//quick_ = $$PWD/designer/fotaoquick_ = $$[QT_INSTALL_QML]/$${uri}/designertoaquick_ = $$PWD/qmldirtoaquick_ = $$[QT_INSTALL_QML]/$${uri}taoquick_qml_ = $$PWD/BasicComponent/Button/*.qmltaoquick_qml_ = $$[QT_INSTALL_QML]/$${uri}/BasicComponent/Buttontaoquick_qml_ = $$PWD/BasicComponent/Mouse/*.qmltaoquick_qml_ = $$[QT_INSTALL_QML]/$${uri}/BasicComponent/Mousetaoquick_qml_ = $$PWD/BasicComponent/Others/*.qmltaoquick_qml_ = $$[QT_INSTALL_QML]/$${uri}/BasicComponent/Otherstaoquick_qml_ = $$PWD/BasicComponent/Progress/*.qmltaoquick_qml_ = $$[QT_INSTALL_QML]/$${uri}/BasicComponent/Progresstaoquick_degisner_ = $$PWD/designer/images/*.pngtaoquick_degisner_ = $$[QT_INSTALL_QML]/$${uri}/designer/imagesINSTALLS += taoquick_designer toaquick_qmldir taoquick_qml_buttons taoquick_qml_mouse taoquick_qml_others taoquick_qml_progress taoquick_degisner_im最简Demo有读者反馈说，上⾯的太复杂了，不容易抓住重点。涛哥特意写了⼀个最简单的Demo，给⼤家参考，github链接：