0

QT Quick 2 を使用して UI を構築しています。一度に 1 つずつ表示する必要がある 5 つのパネルで構成されています。そこで、これらのパネルを切り替えるためのフリップ効果を書きたいと思います。Flipable 要素の効果が必要であることがわかりましたが、2 つのパネルしかフリップできません。これを 5 枚のパネルで行うにはどうすればよいですか?

5 つのパネルは、順番にではなく、(5 つのボタンによって) ランダムに表示されるようにトリガーされます。

4

1 に答える 1

0

フリップ可能の前後に、複数のパネルを配置しますが、一度に表示されるのは 1 つだけです。サイドで現在アクティブなパネルを決定する 2 つのグローバル変数があります。次に、フリップするたびに、これらのパネルの 1 つを表示し、他のパネルを非表示にするロジックを 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}

}

プロパティ 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 に答える