How to import one QML file to another-CodePudding

I have a problem with understanding the import of QML files into another QML file.

I use Visual Studio 2022 with the Qt Tools Extension.

The project has the following structure in the QML directory:

|--src
|-----qml
|-------display
|-----------Display.qml
|-------x86
|-----------Main.qml

The resource.qrc file looks like this:

<RCC>
    <qresource prefix="/screens/display">
        <file>qml/display/Bottom.qml</file>
        <file>qml/display/Content.qml</file>
        <file>qml/display/Display.qml</file>
        <file>qml/display/Footer.qml</file>
        <file>qml/display/FooterButton.qml</file>
        <file>qml/display/Header.qml</file>
        <file>qml/display/HeaderButton.qml</file>
        <file>qml/display/Left.qml</file>
        <file>qml/display/Right.qml</file>
    </qresource>
    <qresource prefix="/screens/x86">
        <file>qml/x86/Button.qml</file>
        <file>qml/x86/Encoder.qml</file>
        <file>qml/x86/Main.qml</file>
    </qresource>
</RCC>

Main.qml in x86 folder should use the Display.qml from display folder like this:

GridLayout {
    id: grid
    anchors.fill: parent
    rows: 4
    columns: 3
        Rectangle { id: left; Layout.row: 0; Layout.column: 0; Layout.rowSpan: 4; Layout.fillWidth: true; Layout.fillHeight: true; Layout.preferredWidth: _leftSideWidth; color: "whitesmoke" }
        Rectangle { id: top; Layout.row: 0; Layout.column: 1; Layout.fillWidth: true; Layout.fillHeight: true; Layout.preferredHeight: _headerHeight; Layout.preferredWidth: _baseWidth; color: "lightgray" }
        
        Display { Layout.row: 1; Layout.column: 1; Layout.fillWidth: true; Layout.fillHeight: true; Layout.preferredHeight: _baseHeight }
        
        Rectangle { id: buttons1; Layout.row: 2; Layout.column: 1; Layout.fillWidth: true; Layout.fillHeight: true; Layout.preferredHeight: root.buttons1Height; color: "lightgray"
            RowLayout { anchors.centerIn: parent; spacing: 20
                Button { id: button1; height: root.buttonHeight; icon: "abort"; onButtonClicked: { console.log("Button1 clicked") } }
                Button { id: button2; height: root.buttonHeight; icon: "abort"; onButtonClicked: { console.log("Button x2 clicked") } }

I tried several variants of import statements in Main.qml and variants of engine.addImportPath() but without knowing exactly in which form this has to be done it is a matter of luck to get it running.

Currently I get an error

qrc:/screens/x86/qml/x86/Main.qml:35:9: Display is not a type

CodePudding user response：

Your .qrc file shows a prefix that you have to add on to the path of the file. So your import should look like this:

import qrc:/screens/display/qml/display