在qml工程中怎么使用qmldir进行模块管理

关于qmldir这个文件，在qml模块化管理中可是必不可少的东西，这里的模块化既是c++扩展的模块指又是指纯qml拓展的模块

这里取纯qml中如何使用qmldir进行管理

参考QtSDK中的文档 Module Definition qmldir Files

参考 制作Qt Quick 2 Extension Plugin的几个问题－Qt  

这里先说一个qml的工程文件 .qmlproject

一般如下

/* File generated by Qt Creator */

import QmlProject 1.1

Project {
    mainFile: "main.qml"

    /* Include .qml, .js, and image files from current directory and subdirectories */
    QmlFiles {
        directory: "."
    }
    JavaScriptFiles {
        directory: "."
    }
    ImageFiles {
        directory: "."
    }
    /* List of plugin directories passed to QML runtime */
    // importPaths: [ "../exampleplugin" ]
}

使用的单词很明白，表明了此qml工程的qml文件的路径，js文件的路径，图片路径，还有一个是被自动注释的importPaths属性，是一个list对象（js中的Array对象），存放着自定义的qml模块路径。

现假设有如下qml工程，其工程路径如下所示

| Test.qmlproject 
| + Modules
| |  + UI
| | | qmldir
| | | Button.qml
| | | util.js
| main.qml

其中main.qml是qml程序的入口主文件，与其同目录还有一个Modules文件夹，这个文件夹下有一个UI文件夹，这个UI文件夹包含一个自定义Button.qml，一个js文件以及一个qmldir文件。

那么qmldir这个文件的内容如下

module UI
Button 1.0 ./Button.qml 
Util 1.0 ./util.js

# 这个是注释
# 说说语法
# module 后面的那个单词就是模块名，一般与qmldir文件所处文件夹同名
# 第二行，先说明一个自定义控件（element）的名字，再指定版本号，最后指定对应的qml文件
# 第三行，先说明一个js文件在qml中被调用时的名字（类似于名字空间） ,再指定版本号，最后指定对应的js文件
#更多详细资料请在qtsdk中搜索 Module Definition qmldir Files

qmldir中，指定自定义的element名必须是大写字母开头，然后要指定版本号，这里是为了进行版本区分。

例如有两个button1.qml和button2.qml

于是便可以使用如下语句进行版本区分

Button 1.0 ./button1.qml
Button 2.0 ./button2.qml

在qml工程文件中就可以添加这么一句

importPaths:["./Modules"]

在调用模块的qml文件使用import就可导入模块了

import UI 1.0;

注意:qmldir最好要放在.qmlproject工程文件下的一个文件夹里，并且qmldir中的module名与qmldir所处的文件夹同名.

这样就可以很方便的调用自定义图元控件了。也可以直接进行控件的版本管理。

另外给大家介绍一个qml实现的UI库

qml-material

演示