QML 'Custom Menu'オプションが上に移動する

Question

各オプションのカスタムデータでQMLに "menu"を作成しようとしています 私のアプリケーションの要件については、QMLファイルを動的にロードする（Qt.createComponent）必要があります。私が必要とするのは、一部の固定オプションを下部に表示し、上部をクリックすると上部のオプションの下に別のオプションが表示され、上部に保持されます。 単純な例です。

Option 4 
Option 2 
Option 1 

そしてOption 4でクリックしたときに、メニューの変更

Option 4 
Option 3 
Option 2 
Option 1 

にそう Option 4が上方に移動し、 Option 3表示されます：私は、このメニューを持っています。

私はすべてのメニューの周りに「影」を持っていたいと思います（その目的のためにDropShadowコンポーネントを追加しました）。

この簡単なテストコードは、Rectangle（シャドウに囲まれています）と2つの四角形の内側にあります。固定部（Option 1,Option 2）の場合は Rect1、可動部の場合はRect2（Option 3,Option 4）です。 Rect2は、Rect1（z: -1）の後ろにあり、Option 4のみが表示され、Option 2より上に位置しています。 Option 4をクリックすると、Rect2が上に移動し、すべてのオプションが表示されます。

は、メインウィンドウの高さは、このRect2可視高さに依存するので、私は、Rect2可視高さ、およびメインウィンドウの位置（y値）を更新する必要があり、それを達成するために。

私はそれを動作させていますが、2つの変数が変更されているため（「固定パネル」が上と下に移動しているため）、多くの動きがあります。

また、私はParallelAnimationで2つの値を試しましたが、成功しませんでした。

このメニューをスムーズに動かすにはどうしたらいいですか？

Main.qml：あなたの質問に対する迅速な回答として

import QtQuick 2.0 

Rectangle 
{ 
    id: window 

    property variant win: undefined; 
    Component.onCompleted: 
    { 
     var component = Qt.createComponent("TestMenu.qml"); 
     win = component.createObject(window, {"x": 500, "y": 500}); 
     win.show(); 
    } 
} 

TestMenu.qml:

import QtQuick 2.0 
import QtQuick.Window 2.1 
import QtGraphicalEffects 1.0 

Window { 
    id: window 
    flags: Qt.Tool | Qt.FramelessWindowHint 
    height: panel.height 
    color: "transparent" 

    property int radiusShadow: 20 
    property int iOptionHeight: 30 

    Rectangle { 
     id: panel 
     anchors { centerIn: parent} 

     height: menu1.height + menu2.heightVisible + 2*radiusShadow 
     width: window.width - 2*radiusShadow 
     color: "transparent" 

     Rectangle { 
      id: menu1 

      anchors { bottom: parent.bottom; bottomMargin: radiusShadow } 
      width: parent.width 
      height: column1.children.length * iOptionHeight 

      Column { 
       id: column1 
       anchors.fill: parent 
       Rectangle { 
        color: "red"; 
        Text { text: qsTr("option 2") } 
        height: iOptionHeight; width: parent.width 
       } 
       Rectangle { 
        color: "green"; 
        Text { text: qsTr("option 1") } 

        height: iOptionHeight; width: parent.width 
       } 
      } 
     } 

     Rectangle { 
      id: menu2 

      property int heightVisible: iOptionHeight 

      anchors { top: parent.top; topMargin: radiusShadow; left: menu1.left } 
      width: parent.width 
      height: column2.children.length * iOptionHeight 

      z: -1 

      Column { 
       id: column2 

       anchors.fill: parent 
       Rectangle { 
        id: blue 
        property bool bOpen: false 
        color: "blue"; 
        height: iOptionHeight; width: parent.width 
        Text { text: qsTr("option 4") } 

        MouseArea { 
         anchors.fill: parent 
         onClicked: { 
          blue.bOpen = !blue.bOpen; 
          panel.showHideMenu2(blue.bOpen); 
         } 
        } 
       } 
       Rectangle { 
        color: "pink"; 
        Text { text: qsTr("option 3") } 
        height: iOptionHeight; width: parent.width 
       } 
      } 
     } 

     function showHideMenu2(bShow) 
     { 
      if (bShow) 
      { 
       window.y -= iOptionHeight 
       menu2.heightVisible += iOptionHeight; 
      } 
      else 
      { 
       window.y += iOptionHeight 
       menu2.heightVisible -= iOptionHeight; 
      } 
     } 
    } 

    DropShadow { 
     id: dropShadow 
     visible: true 
     anchors.fill: panel 
     radius: radiusShadow 
     samples: 24 
     color: "#40000000" 
     source: panel 
    } 
} 

Answer 1

、あなたがプロパティの変更のためのBehaviorアニメーションを使用して欲しいものを得ることができます。ここで

、Behaviorアニメーションは、あなたのwindowのy（位置）の変更について、それぞれの長方形のheight変更のために使用されます。ここで

は、私はスムーズな動きを見るために適用することをお勧めいたしますあなたのコードのためのパッチです：

@@ -10,6 +10,9 @@ 

    property int radiusShadow: 20 
    property int iOptionHeight: 30 
+ property int animationDuration: 500 // ms 
+ 
+ Behavior on y { NumberAnimation { duration: window.animationDuration } } 

    Rectangle { 
     id: panel 
@@ -18,6 +21,7 @@ 
     height: menu1.height + menu2.heightVisible + 2*radiusShadow 
     width: window.width - 2*radiusShadow 
     color: "transparent" 
+  Behavior on height { NumberAnimation { duration: window.animationDuration } } 

     Rectangle { 
      id: menu1 
@@ -25,6 +29,7 @@ 
      anchors { bottom: parent.bottom; bottomMargin: radiusShadow } 
      width: parent.width 
      height: column1.children.length * iOptionHeight 
+   Behavior on height { NumberAnimation { duration: window.animationDuration } } 

      Column { 
       id: column1 
@@ -52,6 +57,8 @@ 
      width: parent.width 
      height: column2.children.length * iOptionHeight 

+   Behavior on height { NumberAnimation { duration: window.animationDuration } } 
+ 
      z: -1 

      Column { 
@@ -64,6 +71,7 @@ 
        color: "blue"; 
        height: iOptionHeight; width: parent.width 
        Text { text: qsTr("option 4") } 
+     Behavior on height { NumberAnimation { duration: window.animationDuration } } 

        MouseArea { 
         anchors.fill: parent 
@@ -77,6 +85,7 @@ 
        color: "pink"; 
        Text { text: qsTr("option 3") } 
        height: iOptionHeight; width: parent.width 
+     Behavior on height { NumberAnimation { duration: window.animationDuration } } 
       } 
      } 
     } 
@@ -105,4 +114,4 @@ 
     color: "#40000000" 
     source: panel 
    } 
-}+} 

Answer 2

私は（コードが今簡単です）モデルとListViewコントロールで試してみましたが、私は知りませんそれは可能な場合、私の目標を達成するための 'アニメーション'または 'ビヘイビア'をどこに挿入するか（成功しないいくつかのオプションを試しました...）

予想される効果は、 2ndが現れたときに上に移動するので、下のものはその位置に（下に）維持されます。しかし、私はモデルに要素を追加するデフォルトの動作が...リストが下方

たぶん誰が助けることができる

高さを増加させたことである

マイコード：

import QtQuick 2.0 
import QtQuick.Controls 1.4 

Rectangle { 
    id: rootItem 
    width: 400 
    height: list.height 

    ListModel { 
     id: modelRects 
     ListElement { rectColor: "green" } 
     ListElement { rectColor: "orange" } 
    } 

    ListView { 
     id: list 
     height: modelRects.count * 30 
     model: modelRects 
     delegate: Rectangle { 
       id: delegate 
       height: 30 
       width: rootItem.width 
       color: rectColor 

       MouseArea { 
        anchors.fill: parent 
        onClicked: onRectClicked(index); 
       } 
      } 
     } 

    function onRectClicked(index) 
    { 
     if (index == 0) 
     { 
      if (modelRects.count == 2) 
       modelRects.insert(1, {"idRect": 2, "rectColor": "red"}); 
      else 
       modelRects.remove(1, 1); 
     } 
    } 
}