如何將具有自定義屬性的組件移至QML中的單獨文件

Question

我有一個語言選擇列表的委託。列表中的每個項目都包含一個圖標和文本。 我想將組件定義移動到不同的文件中，並提供當前由IMGDIR定義的字符串作爲屬性。

只要下面的整個文本移動到一個單獨的文件LandDelegate.qml和包括它：

LangDelegate { id: langDlg } 

不起作用。

下面是組件的聲明。

Component { 
    id: langDlg 
    Item { 
     id: wrapper 

     width: langView.width 
     height: langImg.height+10*2 

     Rectangle { 
      id: background 
      x: 2; y: 2; width: parent.width - x*2; height: parent.height - y*2 
      color: "lightgrey" 
      border.color: "orange" 
      radius: 5 
     } 

     states: State { 
      name: "Current" 
      when: wrapper.ListView.isCurrentItem 
      PropertyChanges { target: wrapper; x: 20 } 
     } 
     transitions: Transition { 
      NumberAnimation { properties: "x"; duration: 200 } 
     } 
     MouseArea { 
      anchors.fill: parent 
      hoverEnabled: true 
      onEntered: { wrapper.ListView.view.currentIndex = index; } 
      onClicked: { wrapper.ListView.view.currentIndex = index; langSelect.visible = false; docView.visible = true } 
     } 

     Row { 
      id: topLayout 
      x: 10; y: 10; height: langImg.height + 10*2; width: parent.width 
      spacing: 10 

      Image { 
       id: langImg 
       //width: 50; height: 50 
       source: IMGDIR+licon 
      } 

      Column { 
       width: background.width - langImg.width - 20; height: langImg.height 
       spacing: 5 

       Text { 
        text: lname 
        font.bold: true; font.pointSize: 16 
       } 
      } 
     } 
    } 
} 

Answer 1

據我所知和according的文檔，

組件類型本質上允許QML部件被定義 直列，一個QML文檔中，而不是作爲單獨的QML文件。

Here我們有與此相關的問題的更多信息，

組件是可實例QML定義，通常包含在一個 文件.qml。例如，按鈕組件可以在 Button.qml中定義。

因此，在你的情況下，你的LangDelegate.qml文件不需要根Component元素。使用Item而不是Component。

例子：

LangDelegate.qml

import QtQuick 2.0 

Item { 
    id: langDlg 

    width: 100 
    height: 100 

    Rectangle { 
     id: background 
     x: 2; y: 2; width: parent.width - x*2; height: parent.height - y*2 
     color: "lightgrey" 
     border.color: "orange" 
     radius: 5 
    } 
} 

main.qml

import QtQuick 2.5 
import QtQuick.Window 2.2 

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

    LangDelegate { id: langDlg } 
}