如何將動態內容放置到QML組件中

Question

我在QML中創建可擴展組件時遇到了很多麻煩。有哪些工作技巧，但我想要做的是這樣的：

//Outline.qml 
Rectangle { 
    color: 'red' 
    //Children are inserted here 
} 

//main.qml 
Rectangle { 
    ... 
    Outline { 
    Text { I'm trying to inject this into the Outline component 
     text: "Hi I'm the inner text!" 
    } 
    } 
} 

我知道我可以通過使用Loader組件和設置sourceComponent到Component實例實現這一目標，但是當我做任何適度複雜的東西（例如可重用的對話框）我寫函數和引用子組件實例的能力受到阻礙。如果組件在同一個QML文件中被實例化，那麼id/function關係就會很好，我可以直接引用我的文本字段。

這裏是裝載機的例子：

//Outline.qml 
Rectangle { 
    id : root 
    color: 'red' 
    property Component content; 
    Loader { 
    source : root.content 
    } 
} 

//main.qml 
Rectangle { 
    function getData(){ 
    return inner.getData(); 
    //ERROR inner is undefined because it is created by the Loader instance. 
    } 
    ... 
    Outline { 
    content: Component { 
     TextField { 
      id: inner 
      function getData(){ 
      return inner.text || 'none'; 
      } 
     } 
    } 
    } 
} 

我會愛一個更好的方式來處理它。我知道我可以直接在父級內部構建一個組件，並實現頂級參考，但它不允許我正在尋找的控制級別。在這種情況下，組件的「靜態」擴展將是更可取的。

編輯：這裏是一個QML的例子，說明了這個問題。在點擊輸出爲： ReferenceError: getMe is not defined

import QtQuick 2.2 
import QtQuick.Controls 1.0 
import QtQuick.Layouts 1.1 

Item { 
    id: app 
    width: 640 
    height: 480 

    function accessData(){ 
     output.text = getMe.text 
    } 

    Loader { 
     width: parent.width 
     height: 300 
     sourceComponent: Component { 
      Rectangle { 
       anchors.fill: parent 
       color: 'yellow' 

       TextField { 
        anchors.centerIn: parent 
        id: getMe 
        placeholderText: 'Input data...' 
       } 
      } 
     } 
    } 


    Button { 
     id: button 
     y: app.height - 50 
     text: 'get data' 
     onClicked: { 
      accessData(); 
     } 
    } 

    Text { 
     y: app.height - button.height 
     id: output 
     text: 'none' 
    } 
} 

正如你可以看到，當您使用了「裝載機」法sourceComponent是不一樣的樹（你不能訪問內部數據）的一部分。

Answer 1

這是您的說明性的例子問題的和有效的解決方案稍後再嘗試在您的項目

1. 給一個ID，您的裝載機比如：「ID：yourLoader」和矩形「。ID：yourRect」 裝載機前內

2. 添加一個字符串財產到yourRect將舉行您的TextField.text

   Loader { id: yourLoader 
        width: parent.width 
        height: 300 
        sourceComponent: Component { 
   
       Rectangle { 
          property string yourText : getMe.text 
          id: yourRect 
          anchors.fill: parent 
          color: 'yellow' 
   
        TextField { 
         anchors.centerIn: parent 
         id: getMe 
         placeholderText: 'Input data...' 
        } 
       } 
       } 
   } 
   

3. 我們改變你的函數的AccessData

   function accessData(){ 
          var rect= yourLoader.item //we get yourRect from the loader 
          output.text = rect.yourText // yourText <-- getMe.text 
   
   }