如何在QtQuick2上切换面板

Question

我正在使用QtQuick2来构建一个UI。它由5个面板组成，每次只显示一个。因此，我想写一个翻转效果，在这些面板之间切换。我发现可翻转的元素效果是我想要的，但它只能做两个面板翻转。我怎样才能完成这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；不透明度: 1} Panel3 {id : front_3；不透明: 0} Panel5 {id : front_5；不透明: 0} } 返回:项目{ Panel2 { id : back_2；不透明度: 1} Panel4 { id : back_4；不透明: 0} Panel6 { id : back_6；不透明: 0} } 属性int front_Panel :1 属性int back_Panel :2 MouseArea { anchors.fill:父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}back_2.opacity{back_2.opacity =0 back_4.opacity =0 back_6.opacity =1} front_Panel = back_Panel +1 if( front_Panel === 7) front_Panel =1 if( front_ )面板=== 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} front_3.opacity =0 front_3.opacity=0 front_5.opacity =1} flipable.flipped = !flipable.flipped }

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