Include another QML file from a QML file

Question

There\'s another question on Stackoverflow about this matter but I don\'t find the accepted solution possible. So I ask again because the old question is out of attention.

Answer 1

You can directly call:

Window {
    id: mainWindow
    visible: true
    Feature1{}
}

like this, to load Feature1.qml

Answer 2

See Qt documentation about reuseable components.

The imported QML file defines a type whose name is the same as the filename (capitalized, less the .qml suffix). QML calls the type a reuseable component. You use that type name to instantiate an object in the importing QML document (file.)

Its not like a C language include, where the text of the included file is inserted into the including file. Its more like importing the name of a class in Python, and then instantiating an object of that class in the importing file. Or somewhat similar to Javascript, the imported file is creating a prototype object, and the importing file is prototypically inheriting from it. Except note the discussion about the root object and what properties of the component will be visible (because of QML's document scoping.) You won't be able to access everything in the imported file as if it were a C include, a Python import, or a JS inheritance.

Answer 3

It's easy like that. Put all your file components in a folder like "components". In your case, the name of the file can be Toolbar.qml. Write the QML code for you toolbar, my example will draw a red rectangle.

 import QtQuick 2.6
    
    Item {
        width: 500
        height: 100
        Rectangle {
            width: 500
            height: 100
            color: "red"
            radius: width * 0.5
        }
    }

And then, in your screens which you want to use this component (for example, file main.qml), is simple like that:

import "components" as Components
        
       
Components.Toolbar {
    Layout.fillHeight: true
}

Take care about the location of files, and still all components should start with a Caps letter, in this example:

\main.qml
\components\Toolbar.qml

Answer 4

You can just call the Name of the qml. for ex. I have 2 qml file. The main.qml and Merchant.qml

I just called the Merchant. it should be showed in intellisense.

ApplicationWindow {
id: mainWindow
visible: true
Component{
    id: merchantsComponent
    Merchant{
        id: merchants
        width: mainWindow.width
        height: mainWindow.height
    }
}

}

You can just call that compenent to Loader

Answer 5

Finally I have dug it out from internet. Let's say the to-be-included file is 'mycomponent.qml' in this directory structure (Qt Quick):

projectdir/
  qml/
    projectname/
      main.qml
      mycomponent.qml

The content of 'mycomponent.qml' (for example):

Text {
  text:"Hello, Scooby Doo!";
}

We have to load it this way (in 'main.qml'):

Rectangle {
  ...
  Loader {
    source:"mycomponent.qml";
  }
  ...
}

Answer 6

Let's assume you have a file called main.qml and a component in another file called MyCustomText.qml. If both files are in the same directory you can directly load the component like this:

// in Main.qml
Rectangle {
  id: root
  MyCustomText {
    text: "This is my custom text element"
  }
}

If MyCustomText.qml is in another subdirectory MyComponents for example to group all your custom components together, you first need to import the directory before using the component the same way:

// in Main.qml
import "MyComponents"

Rectangle {
  id: root
  MyCustomText {
    text: "This is my custom text element"
  }
}

Another important thing to note is that your QML files should always start with an uppercase letter if you want to be able to use them this way

Of course your Loader solution works too but this is the easiest way to import QML files in other components.