簡體   English   中英

如何使用 QML 動態加載多個組件?

[英]How do you dynamically load multiple components with QML?

我有一個示例項目: https://github.com/jh3010-qt-questions/dynamic_loading

我已閱讀https://doc.qt.io/qt-5/qtqml-javascript-dynamicobjectcreation.html動態解釋如何加載的組件。 我已經在我的示例項目中實現了文檔中描述的方法並且它有效。

但是,由於該方法是基於全局變量的,當我動態和異步加載許多組件時,它是如何工作的還不清楚。 如果我想遍歷componentNames並動態加載每個組件,我將如何構造這個異步代碼?

main.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

ApplicationWindow
{
  id: appWindow

  width:    640
  height:   480
  visible:  true
  title:    qsTr("Hello World")

  property var component
  property var componentObject
  property var componentNames: [ "ComponentA.qml", "ComponentB.qml", "ComponentC.qml" ]

  function finishCreation()
  {
    console.log( "finish creation" )

    if ( component.status === Component.Ready )
    {
      componentObject = component.createObject( contentColumn );

      if ( componentObject === null )
      {
          // Error Handling
          console.log("Error creating object");
      }
    }
    else if ( component.status === Component.Error )
    {
        // Error Handling
        console.log("Error loading component:", component.errorString());
    }
  }

  Connections
  {
    target: appWindow

    Component.onCompleted:
    {
      component = Qt.createComponent( `qrc:/${componentNames[0]}` );

      if ( component.status === Component.Ready )
      {
        console.log( "ready" )

        finishCreation();
      }
      else
      {
        component.statusChanged.connect( finishCreation );
      }


      console.log( "completed window" )
    }
  }

  Item
  {
    anchors.fill: parent

    Column
    {
      id: contentColumn

//      ComponentA {
//      }

//      ComponentB {
//      }

//      ComponentC {
//      }
    }
  }
}

qml.qrc

<RCC>
    <qresource prefix="/">
        <file>main.qml</file>
        <file>qtquickcontrols2.conf</file>
        <file>ComponentA.qml</file>
        <file>ComponentAForm.ui.qml</file>
        <file>ComponentB.qml</file>
        <file>ComponentBForm.ui.qml</file>
        <file>ComponentC.qml</file>
        <file>ComponentCForm.ui.qml</file>
    </qresource>
</RCC>

一種方法是本地化函數/變量的 scope。 您可以將函數嵌套在其他函數中,以便它們仍然可以引用公共變量,但隨后對外部 function 的調用不會干擾。

function generateObjects() {
    function generateOneObject(name) {
        var component
        var componentObject

        function finishCreation() {
            componentObject = component.createObject( contentColumn );
        }

        component = Qt.createComponent(`qrc:/${name}`)

        if (component.status === Component.Ready) {
            finishCreation()
        } else {
            component.statusChanged.connect( finishCreation );
        }
    }

    for (var index in componentNames) {
        generateOneObject(componentNames[index])
    }
}

Component.onCompleted: {
    generateObjects()
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM