如何使翻转效果切换面板上QT快速2

Question

我使用QT Quick 2来构建一个UI。它由5个面板组成，应该一次显示一个。所以我想写一个翻转效果来在这些面板之间切换。我发现Flipable元素效果是我想要的，但它只能做两个面板翻转。我怎样才能完成5个面板?

5个面板将被触发随机出现(通过5个按钮)，而不是顺序。

Answer 1

在flipable的前面和后面，放置多个panel，但一次只能显示一个。有两个全局变量，它们决定当前一侧的活动面板是什么。然后在每次翻转时，编写逻辑，使其中一个面板可见，其他面板不可见，一个接一个。

front : Item {
Panel1 {opacity: 1}
Panel2 {opacity: 0}
Panel3 {opacity: 0}
Panel4 {opacity: 0}
Panel5 {opacity: 0} 
}
back : Item {
Panel1 {opacity: 0}
Panel2 {opacity: 1}
Panel3 {opacity: 0}
Panel4 {opacity: 0}
Panel5 {opacity: 0} 
}

---

编辑:

如果您希望在屏幕中保持持久性(正如您在评论中提到的)，您可以这样进行:

front: Item{

Panel1 {id : front_1 ;opacity: 1}
Panel3 {id : front_3 ;opacity: 0}
Panel5 {id : front_5 ;opacity: 0} 

}

back: Item{

Panel2 { id : back_2 ; opacity: 1}
Panel4 { id : back_4 ; opacity: 0}
Panel6 { id : back_6 ; opacity: 0}

}

property int front_Panel: 1

property int back_Panel: 2

 MouseArea  
 {
     anchors.fill: parent
     onClicked: 
     {
         if( side === Flipable.Front )
         {
              back_Panel = front_Panel+1
              if( back_Panel === 2 )
              {
                 back_2.opacity = 1
                 back_4.opacity = 0
                 back_6.opacity = 0
              } 
              else if( back_Panel === 4 )
              {
                 back_2.opacity = 0
                 back_4.opacity = 1
                 back_6.opacity = 0
              }  
              else 
              {
                 back_2.opacity = 0
                 back_4.opacity = 0
                 back_6.opacity = 1
              }  
         }
         else
         {
              front_Panel =  back_Panel + 1
              if( front_Panel === 7 )
                  front_Panel = 1
              if( front_Panel === 1 )
              {
                 front_1.opacity = 1
                 front_3.opacity = 0
                 front_5.opacity = 0
              } 
              else if( front_Panel === 3 )
              {
                 front_1.opacity = 0
                 front_3.opacity = 1
                 front_5.opacity = 0
              }  
              else 
              {
                 front_1.opacity = 0
                 front_3.opacity = 0
                 front_5.opacity = 1
              }  
         }
         flipable.flipped = !flipable.flipped 
     } 
 }

有一个问题，你应该有甚至面板的数量:-)