如何使用带自定义项目的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本身 - 或好，而对象比委托来显示。