QML package management

写过C++的都知道,C++是没有包的概念的,用的是#include头文件,Usually header files contain classes、structures such as functions,具体实现在cpp文件.其他语言如JAVA、GoIntroducing other files is by importing packages,That is, import a moduleModule.C++due to its historicity,为了兼容C,Compile and link mode alsoC一致,所以采用的是#include头文件的方式,There are many drawbacks to this：

• 低效：头文件的本职工作是提供前置声明,而提供前置声明的方式采用了文本拷贝,文本拷贝过程不带有语法分析,会一股脑将需要的、不需要的声明全部拷贝到源文件中.

• 传递性：最底层的头文件中宏、变量等实体的可见性,可以通过中间头文件“透传”给最上层的头文件,这种透传会带来很多麻烦.

• 降低编译速度：加入 a.h 被三个模块包含,则 a 会被展开三次、编译三次.

• 顺序相关：程序的行为受头文件的包含顺影响,也受是否包含某一个头文件影响,在 C++ 中尤为严重（重载）.

• 不确定性：同一个头文件在不同的源文件中可能表现出不同的行为,导致这些不同的原因,可能源自源文件（比如该源文件包含的其他头文件、该源文件中定义的宏等）,也可能源自编译选项.

The way of using the package can be solved to a certain extent#include出现的一些问题.QMLAs a language developed this year,The current mainstream approach will naturally be taken in terms of introducing other modules,i.e. import package.本篇文章将会介绍QMLPackage management related usage.

语法

QMLImport packages in the same way as othersGo、Python类似,使用import,如导入Qt自带的包

import QtQuick 2.15

具体格式为：

import <ModuleIdentifier> <Version.Number> [as <Qualifier>]

• <ModuleIdentifier> is a point URI The identifier specified by the notation,It uniquely identifies the type namespace provided by the module.
• <Version.Number> 是 MajorVersion.MinorVersion a version of the form,It specifies the various object types and types that can be used as a result of the import JavaScript 资源的定义.
• <Qualifier> is an optional local namespace identifier,Object types provided by the module and JavaScript The resource will be installed into this identifier（如果给定的话）. 如果省略,Object types provided by the module and JavaScript Resources will be installed into the global namespace.

as+The local namespace mainly deals with two modules with the same name but in different modulesQML类型的情况

import QtQuick 2.0 as CoreItems
import "../textwidgets" as MyModule

CoreItems.Rectangle {
    width: 100; height: 100

    MyModule.Text { text: "Hello from my custom text item!" }
    CoreItems.Text { text: "Hello from Qt Quick!" }
}

包含.qml文件

qmlThe engine will automatically retrieve the directory under the same levelqml文件,Do not use displayimport,.qmlThe filename is typename

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    NewRect {}
}

 If not in the same directory,则需使用import指定路径

import QtQuick 2.15
import QtQuick.Window 2.15
import "./components"

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    MyRect {}
    TestRect {}
}

This way is generally a file is a module,比较简单,The following describes the composition of multiple files into onemodulepackaging and introduction

qmldir管理包

基本用法

Create and import the following directory,The first of these is the belturl的

qmldir文件内容

NewPlugins：

module NewExamplePlugins
NewRect 1.0 NewRect.qml

MyPlugins

module MyExamplePlugins
TestRect 1.0 MyRect.qml

设置导入路径,这步是必须的,告诉QMLThe engine path where this module is located

engine.addImportPath("qrc:/TestQMLPlugin/");

 引入module

import QtQuick 2.15
import QtQuick.Window 2.15
import MyPlugins 1.0
import com.mycompany.test.NewPlugins 1.0

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    TestRect {}
    NewRect {}

}

The whole process is quite simple and clear

版本管理

qmldir支持版本管理,如上面例子中MyRectUpdated version to 2.0,新建MyRect2.qml文件

MyRect.qml：

import QtQuick 2.0
import QtQuick.Controls 2.15

Item {
    anchors.centerIn: parent
    Rectangle {
        width: 100
        height: 100
        color: "teal"
        Label {
            width: 50
            height: 20
            text: "TestRect"
        }
    }
}

MyRect2.qml：

import QtQuick 2.0
import QtQuick.Controls 2.15

Item {
    anchors.centerIn: parent
    Rectangle {
        width: 100
        height: 100
        color: "teal"
        Label {
            width: 50
            height: 20
            text: "TestRect222"
        }
    }
}

在qmldir文件中添加

TestRect 2.0 MyRect2.qml

使用时导入2.0的版本,qml会自动使用MyRect2

import QtQuick 2.15
import QtQuick.Window 2.15
import MyPlugins 2.0
import com.mycompany.test.NewPlugins 1.0

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    TestRect {}
}

 Singleton type module

qmldirIt is also possible to declare singleton types,Singleton types are useful when encapsulating some common configuration,具体用法如下

pragma Singleton
import QtQuick 2.0

QtObject {
    property int textSize: 20
    property color textColor: "green"
}

module CustomStyles
singleton Style 1.0 Style.qml

import QtQuick 2.15
import QtQuick.Window 2.15
import CustomStyles 1.0

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")


    Text {
        font.pixelSize: Style.textSize
        color: Style.textColor
        text: "Hello World"
    }

}

internal类型

声明内部的qml类型,That is, the type is only used inside the module,Not available to module callers

新增一个SubRect,在MyRect2中调用,把SubRect声明为internal类型

SubRect：

import QtQuick 2.0

Rectangle {
    width: 50
    height: 50
    color: "transparent"

    Text {
        id: name
        text: "subrect"
        color: "white"
    }
}

MyRect2：

import QtQuick 2.0
import QtQuick.Controls 2.15

Item {
    anchors.centerIn: parent
    Rectangle {
        width: 100
        height: 100
        color: "teal"
        Label {
            anchors.centerIn: parent
            width: 50
            height: 20
            text: "TestRect222"
        }
    }

    SubRect {}
}

qmldir

module MyExamplePlugins
TestRect 1.0 MyRect.qml
TestRect 2.0 MyRect2.qml
internal SubRectPri SubRect.qml

 在main.qml中使用SubRect会报错

 关于qmldir的更多用法,具体看官方的介绍

About the import path

 The set import path is one level above the folder where the module is located,就是说importImported is the name of the folder where the module is located,那QMLThe engine can find it as long as it knows the upper-level directory of the folder name.如上面例子中TestQMLPlugin包含两个模块,为MyPlugins和com.mycompany.test.NewPlugins,The import path just needs to be specified toTestQMLPlugin.A more direct understanding is that the path plus the module name can be found.qml文件,如qrc:/TestQMLPlugin/+com.mycompany.test.NewPlugins就是NewRect.qml和qmldir所在的路径

QMLThe default import path for the engine contains the directory for the application executable、在 QML2_IMPORT_PATH The path specified in the environment variable and from QLibraryInfo 的内置 Qml2ImportsPath,It can be viewed using the following interface

QStringList QQmlEngine::importPathList() const

打印出来看

main song ("qrc:/", "F:/PROJECT/build-QMLImportDemo-Desktop_Qt_5_15_2_MSVC2019_64bit-Debug/debug", "qrc:/qt-project.org/imports", "D:/Qt/Qt5.15.2/5.15.2/msvc2019_64/qml")

The import path contains the directory of the application executable by default,则我们的moduleDirectly placed in this directory can also be directly accessed,qmlMany are included when the program is packagedqml文件就是如此,But there is a drawback to this approachqml源码.All of the above examples are added toqrc资源文件中,Source code exposure is prevented.Except for the way it is placed in the resource file,还可以采用Qtpackaged as a plug-in,In this way, the source code can also not be exposed.

结语

The introduction of modules is fundamental to the use of a language,But simple and necessary,只有了解清楚了,Only we can design and plan better code structure,The package is simple and easy to use、Regular modules.关于QMLPackage management is introduced here,后续会进行QML插件的内容module封装的介绍.