QML自定义组件实现（扩展插件）

1背景

QML 的组件（控件）已经有很多了，在安装目录的qml下。例如：
C:\Qt\Qt5.12.0\5.12.0\mingw73_64\qml或者
C:\Qt\Qt5.12.0\5.12.0\msvc2015_64\qml
最常用的是：QtQuick和QtQuick2.那么，如何自定义新增的库呢？
比如想自己制作一套个性风格的按钮、输入框、进度条、下拉框等？

2 步骤

1 新建 Qt Quick 2 Extension plugin插件

3 添加qml文件作为新控件，文件名要大写开头文件名就是控件名。

没有什么特别，普通的qml即可。如下
HikButton.qml

import QtQuick 2.12
import QtQuick.Controls 2.12
Rectangle {
    id: root
    property alias textItem: t      //导出Text实例，方便外部直接修改
    property alias text: t.text     //导出文本
    property alias textColor: t.color   //导出文本颜色
    property alias containsMouse: area.containsMouse    //导出鼠标悬浮
    property alias containsPress: area.containsPress    //导出鼠标按下
    signal clicked();               //自定义点击信号
    color: "transparent"
    Text {
        id: t
        //默认坐标居中
        anchors.centerIn: parent
        //默认文字对齐方式为水平和垂直居中
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
        //默认宽度为parent的宽度，这样字太长超出范围时自动显示省略号
        width: parent.width
        elide: Text.ElideRight
    }

    MouseArea {
        id: area
        anchors.fill: parent;
        hoverEnabled: parent.enabled;
        onClicked: root.clicked();  //点击时触发自定义点击信号
        cursorShape: Qt.PointingHandCursor  //悬浮或点击时的鼠标样式
    }
}

4 添加C++类作为新控件类型（用的很少）

1 要继承QObject或者子类
2 要有Q_OBJECT宏
3 属性要Q_PROPERTY 函数要Q_INVOKABLE
4 重写 registerTypes 函数如下

void IscQMLPlugin::registerTypes(const char *uri)
{
    // @uri IscQML
    qmlRegisterType<IscQML>(uri, 1, 0, "MyClass");
    qmlRegisterType<visitor>(uri, 1, 0, "Visitor");
}

5 修改qmldir

内容如下

module IscQML
plugin IscQML

MyRect 1.0 MyRect.qml
HikButton 1.0 HikButton.qml

6完成后的基本文件结构

7 使用

1 建立一个和组件名称相同的文件夹，里面放 qmldir,库生成的dll,qml文件
2 复制到qt的安装目录下的qml夹即可。

8 更多说明

8.1 上述步骤7中说的文件夹也可以放在任意地方，需要使用的工程做两件事情

1 在pro文件中修改 QML_IMPORT_PATH =     //【目的是在工程中的qml引用库的时候可以找到】

2 在main函数中增加 //engine.addImportPath(“D:/code/qtcodes/IscQML”); // 【目的是运行阶段能找到库】
这里的路径要是步骤7的文件的父目录。比如：C:\Qt\Qt5.12.0\5.12.0\mingw73_64\qml
* 感觉qml非常依赖于文件路径和文件名称】
3 使用工程的qml中包含 库名称和版本即可，如下

如果上图中红色下划线部分提示错误，可以尝试重启qtCreator.类似于vs studio中的重新扫描。

8.2 如果要让自定义控价的qml内容不可见，编译进dll。

1 需要重写
void xxx（控件名称）::registerTypes(const char *uri)
{
Q_UNUSED(uri);
Q_INIT_RESOURCE(Qml);
}
2 其他问题后面补。