Include another QML file from a QML file
Solution 1
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.
Solution 2
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";
}
...
}
Solution 3
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.
Solution 4
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
![jondinham](https://i.stack.imgur.com/AwEG9.jpg?s=256&g=1)
Comments
-
jondinham over 2 years
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.
The situation is this way. I have application screens defined by 'main.qml', 'feature1.qml', 'feature2.qml'.
These screens share the same toolbar below title bar. The toolbar has multiple items so copy-paste the QML code is like crazy. This question: QML file include - or one monolithic file (structure QML code)? says it's possible to just use QML file name as component name but I can't get it working.
Any solution? with details pls.
-
jondinham over 10 yearsi still prefer the solution using Loader, coz im based on linux, file paths are supposed to be in lowercase
-
hyde over 10 years@PaulDinham There's no such thing in Linux about file or directory name cases. Besides, QML is not C++, it is its own language, large part of development done on Linux I bet. You are "supposed" to follow language conventions.
-
hyde over 10 yearsNote: this needlessly complicates everything, when there is no actual reason to use
Loader
. It should not be used in cases, where you could just directly write the component name to QML "statically". -
jondinham over 10 yearsi meant generically linux file names, dir names are in lowercase
-
jondinham over 10 yearsthere's a case for using Loader: the qml file is in another directory, but this can be solved by using 'import'
-
S.M.Mousavi almost 10 yearsFor Qt 5.3 if you create another prefix in QRC file, you can import that prefix using
import 'qrc:/anotherComponents
-
Strubbl about 9 yearsThe uppercase thing took me some minutes. Thanks
-
nerdoc over 8 years@jondinham this is not true. Linux file names allow every case. There is no rule to have them lowercase. In fact, most of the Linux commands are lowercase to make typing them easier. But your assumption is simply not correct.
-
ymoreau over 6 yearsYou can add that it also works when using QRC, you can use (and import) with relative paths inside the QRC.