在设计器中使用qml自定义Quick模块（使用qml源码）_html-js-css

前言

前一篇文档，笔者记录了如何自定义Quick模块，笔者测试发现无法正常在设计器中显示（商业版可能有自己的处理办法），笔者本次记录下，如何解决这个问题，供读者参考

一、确定模块目录结构

笔者设计的目录结束如下

|- xdquick.pri
|- XdQuick                                模块的主目录
|   |- images                             模块中，qml使用的图片资源
|   |   |- buttons            
|   |   |   |- btn_sel_bg_hov.png         背景图片
|   |   |   |- btn_sel_bg_nor.png         背景图片
|   |   |   |- btn_sel_bg_pre.png         背景图片
|   |- Qml                                模块中，qml文档
|   |   |- CustButton                     第一个，自定义按钮
|   |   |   |- CustButton.qml             qml文件
|   |   |   |- CustButtonForm.ui.qml      qml ui文件
|   |   |- CustRectangle.qml              第二个，自定义矩形
|   |- qmldir                             qmldir文件
|   |- xdquick.qrc                        资源文件
|   |- designer                           给设计器使用的资源
|   |   |- images
|   |   |   |- CustButton.png             自定义按钮使用的图标
|   |   |- XdQuick.metainfo               给设计器使用的metainfo文件

注：

与之前相比，模块下增加了一个designer目录，这里面存放的是给设计器使用的文件

images目录下存放在设计器中显示或拖动时的图片，不需要加入资源文件中

XdQuick.metainfo 好像文件名没什么特殊要求，但扩展名必须是.metainfo，不需要加入资源文件中

二、编写metainfo文件

这个metainfo文件，定义了很多设计器需要的设置信息，笔者目前没有看到官方文档，希望早点出来或可以自动生成

笔者的metainfo文件如下

MetaInfo {
	Type {
        name: "XdQuick.Qml.CustRectangle"
        icon: ""

        ItemLibraryEntry {
            name: "CustRectangle"
            category: "XdQuick - CustRectangle"
            libraryIcon: ""
            version: "1.0"
            requiredImport: "XdQuick"
            Property { name: "width"; type: "int"; value: 120 }
            Property { name: "height"; type: "int"; value: 80 }
			
						
			QmlSource { source: "../Qml/CustRectangle.qml" }
        }
    }
	Type {
        name: "XdQuick.Qml.CustButton.CustButton"
        icon: "images/CustButton.png"

        ItemLibraryEntry {
            name: "CustButton"
            category: "XdQuick - CustButton"
            libraryIcon: "images/CustButton.png"
            version: "1.0"
            requiredImport: "XdQuick"
            Property { name: "width"; type: "int"; value: 96 }
            Property { name: "height"; type: "int"; value: 40 }
        }
    }
}

顶层MetaInfo为固定写法

接下来一个Type就对应Designer中的一个可拖拽的组件：

name是Qml组件文件的路径，路径分隔符用"点"，路径默认从[QTDIR]/qml开始，如果有自定义qml 导入路径，从相应的路径开始查找。为风格统一，笔者的Qml目录采用了大写开头。路径一定要写对，最后的.qml不用写icon 是拖动时的图标，在Designer界面上，从工具箱拖出时（未松鼠标），会显示这个图标。这里的images路径，默认从designer文件夹开始

ItemLibraryEntry 是对这个组件更详细的描述

name 显示在Designer工具箱里面的名字category Designer工具箱中分组的名字libraryIcon Designer工具箱显示的图标version 版本号requiredImport 必要的导入的模块Property 属性。就是可以在Designer中调整的属性。QmlSource 用于指定qml文件的具体位置，好像type中name写对了，就可以省略

Property支持的关键字有 name type value三个。 type 的值，暂时没有完整的支持列表，源码里面能翻到Qml的基础类型[“boolean”, “int”, “real”, “string”, “url”, “color”], Qt发行的Qml中，还能看到”binding”。

(qtcreator-4.9.0\qt-creator-opensource-src-4.9.0\src\plugins\qmldesigner\designercore\metainfo\metainfo.cpp)

若不添加了属性，Qml组件拖出时，会使用对应的值；若什么属性都不写，Designer里面可能看不到对应的属性设置，只能使用代码编写。

笔者搜索资料时，看到有人写了color，还是按照binding字符串处理的，不能用颜色选择器改颜色。这个笔者没测试，感兴趣的小伙伴可以尝试下

三、运行测试

以下是笔者的运行结果

可以直接拖拽到UI中，并编辑属性

注：每次修改metainfo文件后，需要关闭设计器程序后，重新再打开才能生效。只关闭程序或重新qmake不会生效

笔者使用的源码下载

后记

笔者只是简单测试了个，还没深入测试。接下来笔者打算提取出一个项目的所有控件，以方便后面的开发

欢迎分享，转载请注明来源：内存溢出