如何使翻轉效果切換QT Quick 2上的面板

Question

我正在使用QT Quick 2來構建UI。它由5個面板組成，每次顯示一個面板。所以我想寫一個翻轉效果來切換這些面板。我發現Flipable元素效果是我想要的，但它只能做兩個面板翻轉。我如何才能完成5個面板？

5個面板將被觸發以隨機出現（按5個按鈕）而不是按順序。

Answer 1

在flipable的前面和後面，放置了多個面板，但一次只能看到一個面板。有兩個全局變量，它們決定了當前活動面板的一面。然後在每個翻蓋上寫下邏輯，使其中一個面板可見，而其他面板則一個一個地看不見。

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

---

編輯：

如果你想在屏幕持久性（如你在評論提到），你可以這樣進行：

前：項目 {

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

}

背面：項目 {

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

}

屬性INT front_Panel：1

屬性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 
    } 
} 

雖然有一個，但你應該有甚至面板數量:-)