QMLのアニメーションが表示されませんか？</p> <p><strong>Main.qml</strong>：<strong>topbar.qml</strong>と<strong>menubar.qml</strong>として静的およびdynamiacallyロードされ<strong>Audio.qml</strong>含ま

Question

私は3ページを持っています。

Inは、メニューバー（オプションボタン）をアニメーションしたいが、何も表示されない。

ここに4つのファイルがあります。 Zオーダーは機能していないようです。

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

     } 

    } 

私のアニメーションコンポーネント：サブメニュー 2つの状態を持っています; を表示して非表示にします。デバッガでは、 "show"と表示されますが、は何も表示されません。が私の画面に表示されます。

  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 


} 

おかげ

を