使用qml創建手風琴控制的正確方法

Question

我正在嘗試創建手風琴qml控件，如this。 首先，我認爲我可以使用組合框並對其進行自定義，但現在我認爲這是不可能的。 有沒有可以使用的標準控件？如果不是，你能幫我控制結構嗎？

Answer 1

與QML只是玩

PanelItem.qml

import QtQuick 2.7 
import QtQuick.Layouts 1.2 

Item { 
    default property var contentItem: null 
    property string title: "panel" 
    id: root 
    Layout.fillWidth: true 
    height: 30 
    Layout.fillHeight: current 
    property bool current: false 
    ColumnLayout { 
     anchors.fill: parent 
     spacing: 0 
     Rectangle { 
      id: bar 
      Layout.fillWidth: true 
      height: 30 
      color: root.current ? "#81BEF7" : "#CEECF5" 
      Text { 
       anchors.fill: parent 
       anchors.margins: 10 
       horizontalAlignment: Text.AlignLeft 
       verticalAlignment: Text.AlignVCenter 
       text: root.title 
      } 
      Text { 
       anchors{ 
        right: parent.right 
        top: parent.top 
        bottom: parent.bottom 
        margins: 10 
       } 
       horizontalAlignment: Text.AlignRight 
       verticalAlignment: Text.AlignVCenter 
       text: "^" 
       rotation: root.current ? "180" : 0 
      } 
      MouseArea { 
       anchors.fill: parent 
       cursorShape: Qt.PointingHandCursor 
       onClicked: { 
        root.current = !root.current; 
        if(root.parent.currentItem !== null) 
         root.parent.currentItem.current = false; 

        root.parent.currentItem = root; 
       } 
      } 
     } 
     Rectangle { 
      id: container 
      Layout.fillWidth: true 
      anchors.top: bar.bottom 
      implicitHeight: root.height - bar.height 
      clip: true 
      Behavior on implicitHeight { 
       PropertyAnimation { duration: 100 } 
      } 
     } 
     Component.onCompleted: { 
      if(root.contentItem !== null) 
       root.contentItem.parent = container; 
     } 
    } 
} 

用法：

import QtQuick 2.7 
import QtQuick.Layouts 1.2 
import QtQuick.Window 2.0 

Window { 
    visible: true 
    width: 400 
    height: 400 

    ColumnLayout { 
     anchors.fill: parent 
     spacing: 1 
     property var currentItem: null 
     PanelItem { 
      title: "Panel 1" 
      Rectangle { 
       color: "orange" 
       anchors.fill: parent 
      } 
     } 
     PanelItem { 
      title: "Panel 2" 
      Rectangle { 
       color: "lightgreen" 
       anchors.fill: parent 
      } 
     } 
     PanelItem { 
      title: "Panel 3" 
      Rectangle { 
       color: "lightblue" 
       anchors.fill: parent 
      } 
     } 
     PanelItem { 
      title: "Panel 4" 
      Rectangle { 
       color: "yellow" 
       anchors.fill: parent 
      } 
     } 
     Item { 
      Layout.fillWidth: true 
      Layout.fillHeight: true 
     } 
    } 
}