QML 上的动画没有显示？

Question

我有 3 页：

Main.qml ：包含 topbar.qml 和 menubar.qml 作为静态和 Audio.qml动态加载。

想要为菜单栏（选项按钮）设置动画，但没有显示任何内容。

这是 4 个文件。似乎 Z 顺序不起作用。

**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：我调用动画的简短示例

        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 )
            }

        }

    }

我的动画组件：子菜单有两种状态； 显示和隐藏。在调试器中，它告诉我状态：“显示”，但我的屏幕上什么都没有出现。

         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

我发现了错误：我没有在加载的页面中调用子菜单，这就是没有显示的原因。

现在效果很好。我只是添加：

SubMenuAudio{
id:mysub


}

谢谢