VS2022+Qt工具扩展下，QML跨目录导入Display组件失败求助

问题场景 #

环境：Visual Studio 2022 + Qt Tools Extension
项目QML目录结构：

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

resource.qrc配置：

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

需求：在qml/x86/Main.qml中使用qml/display/Display.qml，代码片段：

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

报错信息：

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

解决方案 #

方法1：直接通过资源路径导入 #

在Main.qml顶部添加导入语句，指向Display.qml所在的资源目录：

import "qrc:/screens/display/qml/display/"

路径对应qrc中的prefix和file路径组合，确保末尾斜杠不能省略。

方法2：调整qrc的prefix配置（更简洁） #

修改qrc文件，将prefix设置为与实际目录结构匹配的路径：

<RCC>
    <qresource prefix="/qml/display">
        <file>qml/display/Display.qml</file>
        <!-- 其他display目录下的文件 -->
    </qresource>
    <qresource prefix="/qml/x86">
        <file>qml/x86/Main.qml</file>
        <!-- 其他x86目录下的文件 -->
    </qresource>
</RCC>

之后在Main.qml中可通过相对路径或资源路径导入：

// 相对路径导入
import "../display"
// 或资源路径导入
import "qrc:/qml/display/"

方法3：C++层面添加引擎导入路径 #

在初始化QML引擎的代码中，添加src/qml目录作为全局导入路径：

#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    // 添加资源中的qml目录作为导入路径
    engine.addImportPath("qrc:/qml/");
    // 若使用本地文件路径，可根据项目实际结构调整
    // engine.addImportPath(QCoreApplication::applicationDirPath() + "/../src/qml/");

    const QUrl url(u"qrc:/qml/x86/Main.qml"_qs);
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);

    return app.exec();
}

此时Main.qml中可直接导入display目录：

import "display"

注意事项 #

• QML组件文件名必须首字母大写（你的Display.qml已符合要求），组件名需与文件名完全一致
• 确保qrc文件已正确添加到项目，Visual Studio中右键qrc文件，检查"Qt Resource Compiler"配置正常
• 导入路径末尾的斜杠不可省略，否则会被识别为模块名而非目录

内容的提问来源于stack exchange，提问作者user2377283