Question

我正在使用QT Quick 2来构建UI。它由5个面板组成，应该一次显示一个。所以我想写一个翻转效果来切换这些面板。我发现Flipable元素效果是我想要的，但它只能做两个面板翻转。如何为5个面板完成这项工作？

将触发5个面板随机出现（按5个按钮）而不是按顺序出现。

Answer 1

在可翻转的前面和后面，放置多个面板，但一次只能看到一个面板。有两个全局变量，它们决定一边当前的活动面板是什么。然后在每次翻转时，编写逻辑以使其中一个面板可见，而其他面板则一个接一个地隐藏。

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}

}

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

虽然有一个问题，你应该有甚至数量的面板： - ）

如何在QT Quick 2上切换面板的翻转效果

1 个答案: