Importing Multiple QML Files into main.qml

[jweb1]

Hi all,

I'm new to QML and Qt, but eager to learn. I'm wanting to use several qml files to reduce the size of my main.qml, however, am having trouble doing so.

I'm using a stack view to navigate between screens (in the example below I have a QML file called DiagnosticsScreens.qml at the same file path as my main.qml file).

StackView {
        id: stackView
        width: 608
        height: 414
        x: 96
        y: 66
        initialitem: diagnostics_screen

        Component { id: diagnostics_screen
            DiagnosticsScreen {}
        }
        
    }

When I try to run I get:
QQmlApplicationEngine failed to load component
qrc:/<folder_name>/main.qml:577:13: DiagnosticsScreen is not a type

Any suggestions are greatly appreciated!!!

[jweb1]

@jweb1 Resolved!

Note: it was a resources folder problem. Thanks all

[Sebastiano]

@jweb1 said in Importing Multiple QML Files into main.qml:

DiagnosticsScreen

What are you using as a project manager?

Cmake or qmake, either way are you sure you added DiagnosticsScreen.qml to the project?

And last thing initialItem or initialitem?

[jweb1]

@Sebastiano
qtCreator 9.0.1
I have the DiagnosticsScreen.qml in the same folder as main.qml
initialItem small typo

[oniongarlic]

@jweb1 said in Importing Multiple QML Files into main.qml:

QML file called DiagnosticsScreens.qml at the same file path as my main.qml file).

            DiagnosticsScreen {}

You say DiagnosticsScreens.qml but are using DiagnosticsScreen.

[Sebastiano]

@jweb1
excuse me I mean are you using qmake or cmake, check if DiagnosticsScreens is defined there.

also check what is said by @oniongarlic

[jweb1]

@Sebastiano
My bad, I am using qmake.

I've created a smaller project to make it easier to share. I feel like it shouldn't be hard but it's really grinding my gears lol.

//main.qml

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.0

import "Screen1.qml"
import "Screen2.qml"

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Sample Project")

    StackView {
        id: stackView
        anchors.fill: parent
        initialItem: screen1

        Component {
            id: screen1
            Screen1 {}
        }
        Component {
            id: screen2
            Screen2 {}
        }

    }

}

//Screen1.qml

import QtQuick 2.15
import QtQuick.Controls 2.0

Item {
    Text {
        anchors.centerIn: parent.top
        text: "Screen1"
    }
    Button {
        text: "Go To Screen2"
        anchors.centerIn: parent
        OnClicked: {
            stackView.push(screen2)
        }
    }
}

//Screen2.qml

import QtQuick 2.15
import QtQuick.Controls 2.0

Item {
    Text {
        anchors.centerIn: parent.Top
        text: "Screen2"
    }
    Button {
        text: "Go To Screen1"
        anchors.centerIn: parent
        OnClicked: {
            stackView.push(screen1)
        }
    }
}

//Error Output

QML debugging is enabled. Only use this in a safe environment.
QQmlApplicationEngine failed to load component
qrc:/main.qml:5:1: "Screen1.qml": no such directory

[jweb1]

@jweb1 Resolved!

Note: it was a resources folder problem. Thanks all