Wednesday, 15 July 2015

qml - How to make a flip effect to switch panels on QT Quick 2 -


I am using Qt Quick 2 to create a UI. It is composed of 5 panels which should be displayed one at a time. So I want to write the flip effect to switch to these panels. I think I want flip-able element effect, but it can flip only two panels. How can I do this for 5 panels?

5 panels will be triggered sequentially (5 buttons) to appear sequentially (5 buttons).

Insert multiple panels in front and back of flip, but only one at a time Is visible. There are two global variables that decide what is the current active panel on one side. Then on each flip, write logic to one of these panels to appear and disappear from each other.

  front: item {panel1 {opacity: 1} panel 2 {opacity: 0} panel 3 {opacity: 0} panel 4 {opacity: 0} panel 5 {opacity:}} back : Items {Panel 1 {Opacity: 0} Panel 2 {Opacity: 1} Panel 3 {Opacity: 0} Panel 4 {Opacity: 0} Panel 5 {Opacity: 0}}   

Edit:

If you want firmness in the screen (as you mentioned in the comment), then you can proceed as follows:

front: item {

  Panel 1 {id: front_1; Opacity: 1} panel 3 {id: front_3; Opacity: 0} panel 5 {Id: front_5; Opacity: 0}   

}

back: item {

  panel 2 {id: back_2; Opacity: 1} Panel 4 {id: back_4; Opacity: 0} Panel 6 {ID: Back_6; Opacity: 0}   

} property int front_Panel: 1

property int back_Panel: 2

  MouseArea {anchors.fill: mother -path onclicked: {if (favor === Flipable.Front) {back_Panel = front_Panel + 1 if (back_Panel === 2) {back_2.opacity = 1 back_4.opacity = 0 back_6.opacity = 0} and if (back_Panel === 4) {back_2.opacity = 0 back_4.opacity = 1 back_6.opacity = 0} and {back_2.opacity = 0 back_4.opacity = 0 back_6.opacity = 1}} and {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} and if (front_Panel === 3) {front_1 Opacity = 0 front_3.opacity = 1 front_5.opacity = 0} and {front_1.opacity = 0 front_3.opacity = 0 front_5.opacity = 1}} flipable.flipped =! Flipable.flipped}}    

Although there is a hold, you also need the number of panels too : -) < / Html>

No comments:

Post a Comment