如何在qml中动态创建组件

时间:2018-01-09 10:24:16

标签: javascript qt pyqt qml qtquick2

How to dynamically add components in QML? 我引用此链接在同一窗口中单击按钮时将组件(Rectangle组件)添加到main.qml窗口中。我的qt中没有安装“Ubuntu.Components”。我不知道javascript。这里提到“componentCreation.js”。这是什么意思? 我是qml的初学者。我需要知道有没有办法通过仅使用qml来动态加载qml组件。

1 个答案:

答案 0 :(得分:0)

main.qml

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window {
    id:appWindow
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    property int count: 0
    signal forward
    function fun1(argument1){
     console.log("A function fun1()in the main QML file is invoked by dynmic object")
     console.log("Returned parameter from the QML dynamic objects = ", argument1)
     }

    Item {
        id: root
        width: parent.width
        height: parent.width
        function createItem() {
            Qt.createQmlObject("import QtQuick 2.5; Rectangle { x: 100; y: 100; width: 100; height: 100; color: \"blue\" }", root, "dynamicItem");
        }
    }

    Button{
        width: 200
        height: 50
        text:"Click Me"
        y:400
        x:350
        onClicked: {
            count++
            if(count==1)
            Qt.createComponent("Sprite.qml").createObject(appWindow, {"x": 100, "y": 100});
            if(count===2){
                appWindow.forward()
            }
       }
   }
   onForward:console.log("forward signal is emitted in main QML")
}

Sprite.qml

import QtQuick 2.0

Rectangle {
    id:idRect
    signal buttonClicked()
    width: 80;
    height: 50;
    color: "red";
    x:10;
    y:100
    property string fromCallee:'This value is send signal argument'
    signal send(string pass);
    MouseArea {
                  id: leftMouseArea
                  anchors.fill: parent
                  onClicked:idRect.buttonClicked()
              }
     Component.onCompleted:{
     forward.connect(fun2);
     send.connect(fun1);
     send(fromCallee);
     }
      function fun2(){
          console.log('signal received at dynamic object')
          console.log("value of main qml property 'count'="+count)
      }
}