QtQuick/QMLでアニメーション化された可変サイズのアコーディオンコンポーネントを作成する方法

Question

アニメーションアコーディオンのような要素を作成して、クリック時に拡大したいと考えています。それがうまくいくはずです。

ユーザが赤色の長方形の一方、実際のコンテンツである緑色の四角形をクリックすると、展開しなければなりません。この拡張をアニメーション化したい。緑色の長方形の内容の高さは、赤いヘッダーごとに異なる場合があります。

私はClick-to-Expandの動作を実装できましたが、アニメーションはありません。ここに私は現在持っているコードです。

AccordionElement.qml

import QtQuick 2.5 
import QtQuick.Layouts 1.1 

ColumnLayout { 
    id: rootElement 

    property string title: "" 
    property bool isOpen: false 
    default property alias accordionContent: contentPlaceholder.data 

    anchors.left: parent.left; anchors.right: parent.right 

    // Header element 
    Rectangle { 
     id: accordionHeader 
     color: "red" 
     anchors.left: parent.left; anchors.right: parent.right 
     height: 50 
     MouseArea { 
      anchors.fill: parent 
      Text { 
       text: rootElement.title 
       anchors.centerIn: parent 
      } 
      cursorShape: Qt.PointingHandCursor 
      onClicked: { 
       rootElement.isOpen = !rootElement.isOpen 
      } 
     } 
    } 

    // This will get filled with the content 
    ColumnLayout { 
     id: contentPlaceholder 
     visible: rootElement.isOpen 
     anchors.left: parent.left; anchors.right: parent.right 
    } 
} 

そして、これは、それが親要素から使用されている方法です。

Accordion.qml

ColumnLayout { 
    Layout.margins: 5 

    visible: true 

    AccordionElement { 
     title: "Title1" 
     accordionContent: Rectangle { 
      anchors.left: parent.left; anchors.right: parent.right 
      height: 20 
      color: "green" 
     } 
    } 
    AccordionElement { 
     title: "Title2" 
     accordionContent: Rectangle { 
      anchors.left: parent.left; anchors.right: parent.right 
      height: 50 
      color: "green" 
     } 
    } 

    AccordionElement { 
     title: "Title3" 
     accordionContent: Rectangle { 
      anchors.left: parent.left; anchors.right: parent.right 
      height: 30 
      color: "green" 
     } 
    } 

    // Vertical spacer to keep the rectangles in upper part of column 
    Item { 
     Layout.fillHeight: true 
    } 
} 

これは、（すべての矩形が展開されている）は、次の結果を生成します。

理想的には、赤い四角形（プリンタの用紙など）から緑色の四角形が外に出るようにします。しかし、私はこれを行う方法に立ち往生しています。 heightプロパティを使用していくつかの方法を試しましたが、緑色の矩形が消えますが、赤色の矩形の下に空白が残ります。

ご協力いただければ幸いです。私が行方不明のアプローチはありますか？ここで

Answer 1

は、迅速かつ簡単な例です：

// AccItem.qml 
Column { 
    default property alias item: ld.sourceComponent 
    Rectangle { 
    width: 200 
    height: 50 
    color: "red" 
    MouseArea { 
     anchors.fill: parent 
     onClicked: info.show = !info.show 
    } 
    } 
    Rectangle { 
    id: info 
    width: 200 
    height: show ? ld.height : 0 
    property bool show : false 
    color: "green" 
    clip: true 
    Loader { 
     id: ld 
     y: info.height - height 
     anchors.horizontalCenter: info.horizontalCenter 
    } 
    Behavior on height { 
     NumberAnimation { duration: 200; easing.type: Easing.InOutQuad } 
    } 
    } 
} 

// Acc.qml 
Column { 
    spacing: 5 
    AccItem { 
    Rectangle { 
     width: 50 
     height: 50 
     radius: 50 
     color: "blue" 
     anchors.centerIn: parent 
    } 
    } 
    AccItem { 
    Rectangle { 
     width: 100 
     height: 100 
     radius: 50 
     color: "yellow" 
     anchors.centerIn: parent 
    } 
    } 
    AccItem { 
    Rectangle { 
     width: 75 
     height: 75 
     radius: 50 
     color: "cyan" 
     anchors.centerIn: parent 
    } 
    } 
} 

あなたが過剰に複雑アンカーとレイアウトでそれを不必要です。それは問題のいずれかを必要としないようです。

更新：最初のものと比べると、コンテンツは実際に単純に公開されるのではなく、紙切れのまま紙から外に出るだけでなく、誤った肯定的な結合ループ警告の原因も取り除かれました。