如何使用帶自定義項目的ListView QML

Question

我是QML的新手。我做了感謝互聯網ressources這個手風琴：

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 { 
      Drag.active: dragArea.drag.active 
      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 { 
       id: dragArea 
       anchors.fill: parent 
       cursorShape: Qt.PointingHandCursor 
       drag.axis: Drag.YAxis 

       drag.target: root 

       onReleased: { 

        root.Drag.drop() 
       } 
       onClicked: { 
        if (root.parent.current !== root) { 

         root.current = !root.current; 

         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; 
     } 
    } 
} 

PanelItem.qml

Window { 
    visible: true 
    width: 400; height: 400 

     ColumnLayout { 
      anchors.fill: parent 
      spacing: 1 
      id: test 
      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 
      } 
     } 
} 

main.qml

不過，我希望能夠變化項目索引（位置）感謝「拖動&下降」技術。

我看到它不是很好，很容易在列布局中更改索引。 所以我試圖把我的手風琴放在ListView但我迷路了，它根本不起作用。

我想類似的東西：

Window { 
    visible: true 
    width: 400; height: 400 
    ListView { 
     id: my_list 
     anchors.fill: parent 
     model: 14 
     delegate: PanelItem { 
       id: my_delegate 
       title: "Panel 1" 
       Rectangle { 
        color: "orange" 
        anchors.fill: parent 
       } 
     } 
    } 
} 

main.qml

可能有人幫我做和解釋我做錯了嗎？

非常感謝！

Answer 1

好了，一些問題在這裏：

1. 如果您有PanelItem不在*Layout，你不能使用附加屬性Layout.*。因此，行，如行5：Layout.fillWidth = true將無法​​正常工作。使用width: parent.width或anchors { left: parent.left; right: parent.rigth }來設置寬度。

2. 我不會推薦使用default property var contentItem，因爲這可能會導致一些被遺忘的物體。您可以將多重Items分配給此默認屬性，其中每個新的Item踢出前Item。

3. 改爲使用property Component contentItem，例如QtQuick.Controls 2.0。然後使用Loader來實例化這個Component，當PanelItem被展開時。
   如果不應該動態加載和卸載，請使用property Item contentItem。
   使用不屬於default的屬性可以確保，通常只有一個Item被分配。
   通常只建議只使用default property和alias someItem.data之類的東西。如果您使用default property var someData，則應該聽取onSomeDataChanged並將新添加的對象重新分配給某個適當的容器。 所以，如果你想允許添加多個項目，讓這樣的：

例子。QML

Item { 
    default property alias contentItem.data 
    Item { 
     id: contentItem 
     width: childrenRect.width 
     height: childrenRect.height 
    } 
} 

使用一些線路如implicitHeight: barHeight + contentItemHeight其中barHeight是酒吧的高度，始終可見，而contentItemHeight是(collapsed ? 0 : loadedContentItem.height)

您可以使用一個ObjectModel如果它僅僅是爲在Item S的重新排序的緣故。那麼你不應該提供的委託，爲ObjectModel供應delegate本身 - 或好，而對象比委託來顯示。