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
    }
}

<强> 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 }
}

如何使用自定义属性将组件移动到QML中的单独文件

1 个答案: