如何将具有自定义属性的组件移动到 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 到文档中，

Component 类型本质上允许定义 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
    }
}

ma​​in.qml

import QtQuick 2.5
import QtQuick.Window 2.2

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

    LangDelegate { id: langDlg }
}