Open new QML file from Another QML file

Question

I am trying to open a test2.qml file when the user clicks on a Button inside test1.qml.

I am able to do this using the qml StackLayout, also by Static Loading the files and using the qml Loader.

// main.qml
Window {
  width: 400
  height: 400

  StackLayout {
    id: myStack
    anchors.fill: parent
   
    Test1 {}
    Test2 {} 
  }
}

// Test1.qml 
Item {
  width: 400 
  height: 400

  Button {
    text: "Move Test2"
    onClicked: {
       myStack.currentIndex = 1 // Move to page 2
    }
  }
}

// Test2.qml 
Item {
  width: 400 
  height: 400

  Button {
    text: "Move Test1"
    onClicked: {
       myStack.currentIndex = 0 // Move to page 1
    }
  }
}

But is there a way I can open the .qml file from another QML file without using StackLayout or Loader or even statically including the files and setting the visibility?

Is there a way I can load the file using the QT Quick C++ APIs or from QML directly?

Answer 1

I think you may be looking for this: https://doc.qt.io/qt-5/qtqml-modules-qmldir.html

Let's walk through their example code:

//Style.qml with custom singleton type definition
pragma Singleton
import QtQuick 2.0

QtObject {
    property int textSize: 20
    property color textColor: "green"
}

Above is our custom type we want to import into some other qml file.

// qmldir declaring the singleton type
module CustomStyles
singleton Style 1.0 Style.qml

Above is what we put into the qmldir file. You'll have to make a separate module and then that module will have this qmldir file. You'll have to make an empty file with the QtCreator wizard and name it to qmldir. This is a feature of Qt modules. You say, "this is the name of my module, and it has this type in it defined in Style.qml" inside that qmldir file. That's pretty much all it does. You can define as many qml types in there as you want.

// singleton type in use
import QtQuick 2.0
import CustomStyles 1.0

Text {
    font.pixelSize: Style.textSize
    color: Style.textColor
    text: "Hello World"
}

Here we are importing the Style from our CustomStyles module, and using it where we want it.

So what is going on here is that

1. a module is created. A module is just a folder with a .pro file in it basically and a qmldir file. You will import your module with an import statement. You may want to use TEMPLATE = subdirs to make a project with several modules.

2. Style.qml (just for example) is created and then exported (set to public) from that module. You set to public using the qmldir file in the module.

3. In the qml you want to import the qml file into you do import CustomStyles 1.0 or whatever the module name you use in your project,

4. Then you can reference any QML type defined in the qmldir file because it has been set to public and you imported the module.

So instead of thinking about it like with c++ where you #include a file, think about it more like in python where you import a module and then you can reference any public class or func in that module.

Feel free to leave a comment if you want more clarification on how to create a module. You need to create a module because an import statement import modules not individual files. Importing a module gives access to all files exported from the module in the qmldir file.

Answer 2

You can create a QML object by using JS, see examples https://doc.qt.io/qt-5/qtqml-javascript-dynamicobjectcreation.html#creating-a-component-dynamically

Answer 3

first of I do not think that it is possible to load QML Files in a different way then using Loader or static imports.

The only other way that I could think of is the direct usage of the QML Fiel as a simple Component when it is in the same Prefix in the project.

So for explanation: If you have a simple project where all the QML Files are in the same Prefix.

When you have all the files in this structure, you can simply use the other QMl Files directly and dynamically right here. As far as I know this is the only way to do this effectively.

Here is the code: main.qml

import QtQuick 2.15
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.3

Window {
  width: 400
  height: 400

  StackLayout {
    id: myStack
    anchors.fill: parent

    Test1 {}
    Test2 {}
  }
}

Test1.qml

import QtQuick 2.15
import QtQuick.Controls 2.12

Item {
  width: 400
  height: 400

  Button {
    text: "Move Test2"
    onClicked: {
       myStack.currentIndex = 1 // Move to page 2
    }
  }
}

Test2.qml

import QtQuick 2.15
import QtQuick.Controls 2.5

Item {
  width: 400 
  height: 400

  Button {
    text: "Move Test1"
    onClicked: {
       myStack.currentIndex = 0 // Move to page 1
    }
  }
}

This code worked for me when I had the structure as you can see in the image above. I hope this was a bit helpful.