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

来源：互联网发布：中国的动漫公司知乎编辑：程序博客网时间：2024/05/23 18:19

自定义组件

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

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

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

import QtQuick 2.7import QtQuick.Controls 2.0Rectangle {    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.7import QtQuick.Controls 2.0Rectangle {    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.7import QtQuick.Controls 2.0Rectangle {    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 字符串直接创建一个对象

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

阅读全文

0 0