0

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

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

4

1 回答 1

0

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

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

不过有一个问题，你应该有偶数个面板:-)

于 2013-06-21T05:35:30.933 回答