QT之自定义组件和动态加载

自定义组件

在qml文件中自定义组件可以分为全局自定义组件和内嵌自定义组件

全局自定义组件定义在一个单独的qml文件中，文件名即组件名（这点是c++程序员开始比较迷惑的地方，实际上java的文件名和类名也是如此），首字母默认会转化为大写，类似Item、Text等。

下面自定义一个组件，每秒会自己变幻背景色，我们称之为闪光灯FlashLight，保存为FlashLight.qml

import QtQuick 2.7
import QtQuick.Controls 2.0

Rectangle {
    id: flash;

    property int time : 1000;
    radius: 10
    width: 20
    height: 20

    Timer {
        id: timer;
        interval: time;
        repeat: true;
        running: true;
        triggeredOnStart: true;
        onTriggered: {
            flash.color = Qt.rgba(Math.random(), Math.random(), Math.random(), 1);
        }
    }

    onTimeChanged: {
        timer.interval = time;
    }

    onRadiusChanged: {
        width = radius*2;
        height = radius*2;
    }
}

上述就是一个自定义组件，单独定义在一个qml文件中，它有一个顶层元素是Rectangle，相当于继承自Rectangle，所以也拥有了Rectangle的所有属性和方法，在另外的qml文件中调用它很简单，通过其文件名即可，如下所示

import QtQuick 2.7
import QtQuick.Controls 2.0

Rectangle {
    width: 640;
    height: 480;
    color: "#DCDCDC"

    FlashLight {
        anchors.centerIn: parent
        radius: 100;
        time: 100;
    }
}

直接使用FlashLight ，就和使用Rectangle一样，这里设定了它的属性半径是100，时间是100ms变幻一次颜色，time是我们自定义的一个属性，自定义属性的格式是property type name: value

内嵌组件相当于内嵌类的概念，只有当前文件作用域能够使用它，一般声明形式如下：

import QtQuick 2.7
import QtQuick.Controls 2.0

Rectangle {
    width: 100;
    height: 100;
    color: "#FFF8DC";
    radius: 10;

    border.width: 10;
    border.color: "#FAEBD7";

    Component {
        id: circle;
        Rectangle {
            width: 20;
            height: 20;
            radius: 10;
            color: "#FF0000"
        }
    }

    Loader {
        id: one;
        sourceComponent: circle;
        anchors.centerIn: parent;
        visible: true;
    }

    Loader {
        id: two;
        sourceComponent: circle;
        anchors.centerIn: parent;
        visible: false;
    }

    Loader {
        id: three;
        sourceComponent: circle;
        anchors.centerIn: parent;
        visible: false;
    }

    Loader {
        id: four;
        sourceComponent: circle;
        anchors.centerIn: parent;
        visible: false;
    }

    Loader {
        id: five;
        sourceComponent: circle;
        anchors.centerIn: parent;
        visible: false;
    }

    Loader {
        id: six;
        sourceComponent: circle;
        anchors.centerIn: parent;
        visible: false;
    }

    property int num: 1
    onNumChanged: {
        one.visible = false;
        two.visible = false;
        three.visible = false;
        four.visible = false;
        five.visible = false;
        six.visible = false;
        switch(num){
        case 1:
            one.visible = true;
            break;
        case 2:
            two.visible = true;
            break;
        case 3:
            three.visible = true;
            break;
        case 4:
            four.visible = true;
            break;
        case 5:
            five.visible = true;
            break;
        case 6:
            six.visible = true;
            break;
        }
    }
}

其中id为circle的就是一个内嵌组件，内嵌组件以Component进行定义，给定一个id，Loader是以动态加载的方式在使用它，使用sourceComponent来指定id

自定义属性

property type name: value

自定义信号

sigal name([type arg1,type arg2,...])

动态创建

除了上述以文件名创建组件和以Loader通过id或者文件路径加载组件外，QT还提供了两个JS方法来创建组件

1、使用 Qt.createComponent() 动态地创建一个组件对象，然后使用 Component 的 createObject() 方法创建对象
2、使用 Qt.createQmlObject() 从一个 QML 字符串直接创建一个对象

关于这两种方法的参数和使用可以查阅帮助手册