如何将使用自定义属性的组件移至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

据我所知，根据文档，

组件类型本质上允许定义QML组件 内联，在QML文档中，而不是作为单独的QML文件。

在这里，我们有更多与此问题有关的信息，

组件是一个即时的QML定义，通常包含在 一个.QML文件。例如，可以在 button.qml。

因此，在您的情况下，您的LangDelegate.qml文件不需要root 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 }
}