Как перенести компонент с настраиваемым свойством в отдельный файл в 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 может быть определен в 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 } 
}