11.qml-通过方法来加载组件、字符串方式加载组件

在上章,我们学习了10.qml-组件、Loader、Component介绍.

本章我们继续来学习组件的其它创建方式.

1.调用Function来加载和移除组件

之前我们是使用Loader对象来实现加载和移除组件,本节我们通过调用Function的形式来实现加载和移除组件.

Component拥有的信号有:

• completed() :  对应的号接收器是Component.onCompleted,onCompleted处理程序的运行顺序未定义,它可以在任何对象上声明,比如我们放在Window对象下,则表示只要Window界面加载完成那么就触发,而假如Window下面有个Button对象,那么Button加载后是不会再次触发,除非在Button下面也写上Component.onCompleted,
• destruction() : 对应的号接收器是Component.onDestruction,当对象调用destroy()时,会触发该信号,用来做资源清理工作，它可以在任何对象上声明,处理程序的运行顺序未定义

Component拥有的方法有:

• object createObject(parent, object properties) ：创建一个此Component的实例,参数1表示该实例的父类,参数2是个可选的属性初始化参数

QT帮助示例如下所示:

import QtQuick 2.0

  Item {
      id: container
      width: 300; height: 300
      function loadButton() {
          var component = Qt.createComponent("Button.qml");      // 通过Qt.createComponent()来创建一个组件
          if (component.status == Component.Ready) {
              var button = component.createObject(container);   // 组件创建成功后,则通过component.createObject()来进行实例化对象
              button.color = "red";
          }
      }
      Component.onCompleted: loadButton()              // Item加载成功后,则调用loadButton()方法
  }

其中Qt.createComponent的方法定义如下所示:

object Qt.createComponent(url, mode, parent) ;
//通过指定的url路径来创建qml组件对象.创建失败则返回null,
//mode是可选的参数,设置创建方式是同步还是异步,为Component.Asynchronous或者Component.PreferSynchronous, 
//parent则是设置组件的父对象.

假如我们是像上章4小节那样,使用Component嵌入式定义组件,那么就不需要调用Qt.createComponent()创建组件了,因为组件已经存在,直接使用dynamicBtn.createObject(parent)即可实例化一个button对象.

示例如下所示(需要用到上章的DynamicBtn.qml文件):

import QtQuick 2.14
import QtQuick.Window 2.0
import QtQuick.Controls 2.0

Window{
    id: wind
    visible: true

    function onAdd() {
        console.log("onAdd")
        colum.count += 1
        if (colum.count % 2 == 1) {  // 通过DynamicBtn.qml来实例化对象
            let component = Qt.createComponent("qrc:/DynamicBtn.qml");
            let button = component.createObject(colum);
            button.text = "button"+colum.count.toString()
            button.backColor = Qt.rgba(Math.random(),Math.random(),Math.random(),1)
        } else {                      // 通过嵌入的Component组件直接实例化对象
            let button = dynamicBtn.createObject(colum);
            button.text = "button"+colum.count.toString()
            button.backColor = Qt.rgba(Math.random(),Math.random(),Math.random(),1)
        }
    }
    function onRemove() {
        if (colum.data.length > 0) {
            console.log("onRemove button"+ colum.data.length)
            colum.data[colum.data.length - 1].destroy();
            colum.count -= 1
        }
    }

    Row {
        id: row
        spacing: 20
        padding: 20
        Button {
            id: load
            text: "添加一个Buuton"
            onClicked: onAdd();
        }
        Button {
            id: remove
            text: "移除一个Buuton"
            onClicked: onRemove();
        }
    }

    Column {
        id: colum
        property var count: 0
        anchors.top: row.bottom
        spacing: 20
        padding: 20

    }

    Component {
        id: dynamicBtn
        Button {
            property var backColor: "#7BCBEB"       // 背景颜色
            text: "button"
            implicitWidth: 100
            implicitHeight: 32
            hoverEnabled: true
            contentItem: Label {                    // 设置文本
                id: btnForeground
                text: parent.text
                font.family: "Microsoft Yahei"
                font.pixelSize: 20
                color: "#FFFFFF"
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                elide: Text.ElideRight
            }
            background: Rectangle {
                id: btnBack
                color: backColor
                radius: height / 4

                Rectangle {
                    width: btnBack.width * 0.9
                    height: btnBack.height * 0.4
                    x:  btnBack.width * 0.05
                    y:  btnBack.height * 0.05
                    radius: width / 2
                    color:  Qt.lighter(btnBack.color, 1.09)

                }
            }
            onDownChanged: {
                btnBack.color = down ? Qt.lighter(backColor, 0.9) : backColor // 设置按下的背景颜色
            }
            onHoveredChanged: {
                btnBack.color = hovered ? Qt.lighter(backColor, 1.1) : backColor // 设置徘徊的背景颜色
            }
        }

    }
}

效果如下所示:

2.通过字符串来加载和移除组件

需要用到的方法如下所示:

object Qt.createQmlObject(qml, object parent, string filepath)
//通过qml字符串来实例化一个新对象，如果创建对象时出错，则返回null。
//其中parent是可选的,用来指定该对象的父类
//filepath也是可选的，它将用于创建对象的错误报告。
//如果创建错误,将会抛出一个err对象,此对象有一个附加属性qmlErrors，它是遇到的错误的数组。此数组中的每个对象都有成员lineNumber、Number、fileName和message、

示例如下所示:

import QtQuick 2.14
import QtQuick.Window 2.0
import QtQuick.Controls 2.0

Window{
    id: wind
    property var objArr: []
    visible: true
    height: 600; width: 480
    color: "#FFFFFF"
    Column {
        spacing: 8
        z: 1000
        Row {
            height: create.height
            spacing: 8
            Button {
                id: create
                text: "创建组件"
                height: 30
                onClicked: {
                    try {
                        objArr[objArr.length] = Qt.createQmlObject(qmlText.text, wind);
                        textHint.text = "当前组件个数:" + objArr.length
                    } catch(err) {
                        console.log('Error on line:' + err.qmlErrors[0].lineNumber + '\n message:' + err.qmlErrors[0].message);
                    }
                }
            }
            Button {
                id: remove
                height: 30
                text: "移除组件"

                onClicked: {
                    if (objArr.length > 0) {
                        objArr[0].destroy();
                        objArr.splice(0,1);     // splice除了替换内容外,还可以当成删除数组元素使用,这里表示从数组下标0,删除1个元素.
                        textHint.text = "当前组件个数:" + objArr.length
                    }
                }
            }
            Text {
                id: textHint
                font.pixelSize: 14
                text: "当前组件个数: 0"
                anchors.baseline: remove.baseline
            }
        }

        Rectangle {
            width: 360; height: 240
            color: "transparent"
            TextEdit {
                id: qmlText
                anchors.fill: parent; anchors.margins: 5
                readOnly: false
                font.pixelSize: 14
                selectByMouse: true
                wrapMode: TextEdit.WordWrap

                text: 'import QtQuick 2.0\n' +
                      'Rectangle {\n'+
                      '      width: 360; height: 240\n'+
                      '      color: "red"\n'+
                      '      x: 100\n'+
                      '      y: 100\n}'
            }
        }
    }
}

运行效果如下所示:

当我们编辑好内容后,点击"创建组件",然后就会通过字符串来创建组件，然后点击移除组件,则会将最早创建的组件移除掉。