Animation on QML not showing? - qt

Question

I have 3 pages :
Main.qml : contains topbar.qml and menubar.qml as static and Audio.qml which is loaded dynamiacally.
In would like to animate menubar ( options buttons) but nothing is showing.
Here is the 4 files. It seems that the Z order is not working.
**Topbar.qml**
import QtQuick 2.0
Item {
id:root
width: 736
height: 55
z:100
FontLoader {
id: regular
source: "fonts/DINPro-Regular.otf"
}
Rectangle {
id: rectangle1
anchors.fill: parent
color: "black"
Text {
id: text1
color: "#ffffff"
text: qsTr("18:00")
anchors.top: parent.top
anchors.topMargin: 16
anchors.bottom: parent.bottom
anchors.bottomMargin: 8
anchors.left: parent.left
anchors.leftMargin: 332
anchors.right: parent.right
anchors.rightMargin: 332
font.pixelSize: 24
font.family: regular.name
}
}
}
Main.QML
import QtQuick 2.0
import QtQuick.Window 2.2
import Controllers 1.0
import "Logic.js" as Controller_Js
Window {
visible: true
id: root
width: 800
height: 480
maximumHeight: height
maximumWidth: width
minimumHeight: height
minimumWidth: width
color: "#000000"
Component.onCompleted: {
Controller_Js.setCurrentPage(Controller.homeView)
loader.source = "Home.qml"
console.log("module controllers", Controller.homeView)
}
FontLoader {
id: regular
source: "fonts/DINPro-Regular.otf"
}
FontLoader {
id: medium
source: "fonts/DINPro-Medium.otf"
}
FontLoader {
id: bold
source: "fonts/DINPro-Bold.otf"
}
TopBar {
id: topbar
x:58
y:0
width: 742
height: 55
}
MenuBar {
id: menuBar1
width: 58
height: 480
}
Item{
id: page
x: 64
y:54
width: 736
height: 426
Loader{
id: loader
x: 0
y: 0
width: 736
height: 428
asynchronous: true
}
MenuBar.qml : short example where i call my animation
Item {
id: optionsBut
x: 8
y: 164
width: 48
height: 52
Image {
id: image2
x: 3
y: 0
width: 37
source: "assets/RT-actionbar-sub-menu.png"
}
MouseArea {
id: mousesubmenu
x: -2
y: -15
width: 53
height: 67
onClicked: {
Controller.statesubmenu="ShowSubmenu"
console.log("state submenu",Controller.statesubmenu )
}
}
}
my animation component : Submenu which have 2 states ; show and hide. In debugger it tell me state : "show" but nothing appears in my screen.
Rectangle {
id: root
x: -382
y: 0
width: 318
height: 425
color: "#282827"
border.width: 0
visible: true
z: 2000
state: Controller.statesubmenu
MouseArea {
anchors.fill: paren
onClicked: mouse.accepted = false
}
Rectangle {
id: item1
width: 317
height: 70
color: "#00000000"
Text {
x: 94
y: 18
width: 100
height: 35
color: "#ffffff"
text: qsTr("Sources")
font.pixelSize: 27
font.family: regular.name
}
Rectangle {
width: 317
height: 1
y:70
color: "#40D8D8D8"
}
}
Rectangle {
id: item2
y: 70
width: 317
height: 70
color: "#00000000"
Text {
x: 94
y: 18
width: 122
height: 35
color: "#ffffff"
text: qsTr("Settings")
font.pixelSize: 27
font.family: regular.name
}
Rectangle {
width: 317
height: 1
y:70
color: "#40D8D8D8"
}
}
Rectangle {
id: item3
x: 0
y: 141
width: 317
height: 70
color: "#00000000"
Text {
x: 94
y: 18
color: "#ffffff"
text: qsTr("Audio Effects")
font.pixelSize: 27
font.family: regular.name
}
Rectangle {
width: 317
height: 1
y:70
color: "#40D8D8D8"
}
}
Rectangle {
id: item4
x: 0
y: 212
width: 317
height: 70
color: "#00000000"
Text {
x: 94
y: 18
color: "#ffffff"
text: qsTr("My stations")
font.pixelSize: 27
font.family: regular.name
}
Rectangle {
width: 317
height: 1
y:70
color: "#40D8D8D8"
}
}
states: [
State {
name: "ShowSubmenu"
PropertyChanges {
target: root
x: 0
}
},
State {
name: "HideSubmenu"
PropertyChanges {
target: root
x : -382
z: 100
visible: true
}
}
]
transitions: [
Transition {
NumberAnimation {
property: "x"
easing.type: Easing.InOutQuad
}
}
]
}

Answer 1

I found the mistake: I did not call the submenu in the loaded page that's why nothing was showing.
now it works nice. I just add :
SubMenuAudio{
id:mysub
}
Thanks