使用QML进行UI开发，非常灵活方便，且动画效果容易实现，但因为灵活，为了美观需要使用很多自定义的组件。
这里列举了两种使用自定义组件的方式，主要是为了日后自己翻阅

以下示例的开发环境

• ubuntu16.04
• Qt5.12.12
• ubuntu16.04自带的gcc编译器

工程目录说明

ImpCompDemo/
├── CustomComponents
│   ├── DeButton.qml
│   └── SubDir
│       └── DeTextField.qml
├── ImpCompDemo.pro
├── ImpCompDemo.pro.user
├── main.cpp
├── main.qml
├── Parameters
│   ├── GlobalParameters.qml
│   └── qmldir
└── qml.qrc

main.qml文件下，包括有CustomComponents和Parameters两个目录
其中CustomComponents下的两个自定义组件，以相对路径方式调用（DeTextField.qml在SubDir目录下）
Parameters下的GlobalParameters.qml定义一些配置信息，使用单例方式注册

以下是程序说明

方式一：使用相对路径方式

使用相对路径方式主要用于较为简单，且调用方和被调用方的相对路径不长且固定的场合

该示例工程中，使用了一个自定义的Button和TextField为例
从工程目录结构可以看到这2个组件分别在main.qml所在目录的CustomComponents文件夹和CustomComponents下的SubDir文件夹中，所以在main.qml中，通过相对路径访问这2个组件使用

// main.qml代码
import QtQuick 2.12
import QtQuick.Window 2.12

// 使用相对路径方式调用组件
import "./CustomComponents"
import "./CustomComponents/SubDir"

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

    // 使用相对路径方式调用组件DeTextField
    DeTextField {
        id: text
        anchors.centerIn: parent
        width: 200
        height: 50
    }

    // 使用相对路径方式调用组件DeButton
    DeButton {
        anchors.top: text.bottom
        anchors.topMargin: 25
        anchors.horizontalCenter: parent.horizontalCenter
        width: 150
        height: 50

        text: qsTr("ok")
    }
}

使用相对路径方式调用，确实很方便，只要import 后把被调用组件的相对路径加进来即可

方式二：使用模块注册方式

该方式使用qmldir文件对组件进行模块化管理
如该工程所示，Parameters目录下的GlobalParameters.qml即为该方式调用

// GlobalParameters.qml代码
pragma Singleton

import QtQuick 2.12

Item {

    enum Status {
        Idle,
        Off,
        On
    }

    readonly property color btnBkColor: "lightblue"
    readonly property int txtPointSize: 12
}

由于GlobalParameters.qml内管理工程中的全局参数，故使用了单例方式

qmldir文件内容

module Parameters
singleton GlobalParameters 1.0 GlobalParameters.qml

注：模块名称，应与模块所在的目录名称完全一致

使用该模块注册方式需要有3步操作

1. 使用import导入模块
2. 在工程pro文件中QML_IMPORT_PATH变量，添加模块所在目录的上级目录
3. 在main.cpp中使用addImportPath添加该模块的上级目录

// 使用模块注册方式步骤1：导入模块
import Parameters 1.0

# 使用模块注册方式步骤2：QML_IMPORT_PATH变量，添加模块所在目录的**上级**目录
QML_IMPORT_PATH += \
    $$PWD

QQmlApplicationEngine engine;
// 使用模块注册方式步骤3：使用addImportPath添加该模块的**上级**目录
engine.addImportPath("qrc:/");

组件通过模块方式注册后，可以方便的使用其内部的资源，比如枚举

Component.onCompleted: {
        // 使用已注册的模组内单例组件的枚举类型
        console.log(GlobalParameters.Status.On)
    }

示例工程源码，提交在码云

https://gitee.com/sonicss/QmlImportDemo.git

git@gitee.com:sonicss/QmlImportDemo.git