QML, failed by using components of another qml file - qt

Question

I have a problem with the usage qml components from another qml file. I have 2 files, main.qml and menu.qml (menu.qml is in another folder called menu). In the menu.qml I have my menu, which I want to use in main.qml
import QtQuick 2.9
import QtQuick.Controls 2.4
Menu {
id: routingMenu
width: maximumWidth
height: 200
y: 20
cascade: true
Rectangle {
Label {
x: (app_window.width / 8)
text: "FROM:"
font.pixelSize: 22
font.italic: true
color: "black"
}
Label {
y: routingMenu.height / 7
text: "Country:"
font.pixelSize: 22
font.italic: true
color: "black"
}
Label {
y: routingMenu.height / 2.5
text: "City:"
font.pixelSize: 22
font.italic: true
color: "black"
}
Label {
y: routingMenu.height / 1.6
text: "Street:"
font.pixelSize: 22
font.italic: true
color: "black"
}
Label {
y: routingMenu.height / 1.2
text: "Postal Code:"
font.pixelSize: 22
font.italic: true
color: "black"
}
} //Rectangle
Rectangle {
x: app_window.width / 2
Label {
x: (app_window.width / 4)
text: "TO:"
font.pixelSize: 22
font.italic: true
color: "black"
}
Label {
y: routingMenu.height / 7
text: "Country:"
font.pixelSize: 22
font.italic: true
color: "black"
}
Label {
y: routingMenu.height / 2.5
text: "City:"
font.pixelSize: 22
font.italic: true
color: "black"
}
Label {
y: routingMenu.height / 1.6
text: "Street:"
font.pixelSize: 22
font.italic: true
color: "black"
}
Label {
y: routingMenu.height / 1.2
text: "Postal Code:"
font.pixelSize: 22
font.italic: true
color: "black"
}
} //Rectangle
Button {
id: sendDataToItem
width: 100
height: 40
x: app_window.width / 2.7
text: "Send"
onClicked: {
//fromAddress.country: "";
//fromAddress.city: "";
//fromAddress.street: "";
//fromAddress.postalCode: "";
//toAddress.country: "";
//toAddress.city: "";
//toAddress.street: "";
//toAddress.postalCode: "";
}
} //sendDataToItem
} //Menu
I tried to use a Component, but it didn't helped me. That is code of my main.qml
import QtQuick 2.10
import QtQuick.Controls 2.2
import QtQuick.Window 2.0
import QtLocation 5.6
import QtPositioning 5.6
import "menu"
ApplicationWindow {
id: app_window
visible: true
width: maximumWidth
height: maximumHeight
title: qsTr("Navigation")
PositionSource {
active: true
onPositionChanged: {
//map_id.center = position.coordinate;
}
}
Plugin {
id: mapPlugin_
name: "osm"
}
/*Loader {
id: loadered
focus: true
source: "menu/menu.qml"
active: true
}*/
Rectangle {
id: mapRectangleID
width: 800
height: 800
x:0
y:20
Map {
id: map_
anchors.fill: parent
plugin: mapPlugin_
center: QtPositioning.coordinate(51.320729390711975,12.280097007751465)
zoomLevel: 15
MapQuickItem {
id: marker_id
coordinate: QtPositioning.coordinate(59.91, 10.75)
sourceItem: Image {
id: endPointImage
source: "assets/marker.png"
width: 100
height: 100
} //size and position of maker
anchorPoint.x: endPointImage.width / 2
anchorPoint.y: endPointImage.height
} //marker
RouteModel {
id: routeBetweenPoints
plugin: Plugin { name: "osm" }
query: RouteQuery {id: routeQuery }
Component.onCompleted: {
routeQuery.addWaypoint(QtPositioning.coordinate(51.318784,12.2773504 ));
routeQuery.addWaypoint(QtPositioning.coordinate(51.3117764,12.280909000000065 ));
//routeQuery.addWaypoint(endPointGeaocodeModel)
update();
}
} //start and end point
MapItemView {
model: routeBetweenPoints
delegate: Component {
MapRoute {
route: routeData
line.color: "red"
line.width: 10
}
} //Component
}//linie, die beide punkte verbindet
GeocodeModel{
id: endPointGeaocodeModel
plugin: Plugin { name: "osm" }
query: "Sandakerveien 116, Oslo"
onLocationsChanged: {
if (count> 0){
marker_id.coordinate = get(0).coordinate
map_id.center = get(0).coordinate
}
}
Component.onCompleted: update()
} //suche den platz mit strasse und stadt
//! [geocode0]
Address {
id: fromAddress
city: ""
country: ""
street: ""
postalCode: ""
} //fromAddress
//! [geocode0]
Address {
id: toAddress
country: ""
city: ""
street: ""
postalCode: ""
} //toAddress
} //Map
} //mapRectangleID
Button {
id: btn_close
width: 100
height: 20
text: "Close"
onClicked: {
Qt.quit();
}
}
Button {
id: btn_routing
width: 100
height: 20
x:100
text: "Routing"
onClicked: {
routingMenu.open();
}
}
Button {
id: btn_oldWay
width: 100
height: 20
x:200
text: "Old way"
onClicked: {
oldWayMenu.open();
}
}
Button {
id: rest
width: parent.width - x
height: 20
x:300
text: ""
onClicked: {
}
}
} //ApplicationWindow
I tried 2 ways to resolve the problem. One with the Loader, but I can't open my menu, and the another with example of QT which is in MapViewer Example. They import only the order and use the id of the component. But it doesn't work. I think, I do something wrong in my code, can someone tell me what I'm doing wrong or show me the right way to resolve my problem.
I think that the most important part of the code is:
Loader {
id: loadered
focus: true
source: "menu/menu.qml"
active: true
}
And then, how I'm using it:
Button {
id: btn_routing
width: 100
height: 20
x:100
text: "Routing"
onClicked: {
routingMenu.open();
}
}
By the button I'm using the component name, because I imported menu. But if I want to use the loader, I would set the visible in loader as false and then set onClicked as true. But I tried this and it didn't work.
Thanks for help
DC

Answer 1

The id is only valid within the .qml outside it has no meaning, for example let's say you're going to create 4 menus then if you would use the id routingMenu, which of the menus would you refer to? because that would cause confusion. So if you want to use the item loaded by Loader you must do it using the item property.
Loader {
id: loadered
focus: true
source: "menu/menu.qml"
active: true
}
// ...
Button {
id: btn_routing
width: 100
height: 20
x:100
text: "Routing"
onClicked: loadered.item.open()
}