如何使用带有自定义项目 QML 的 ListView

Question

我是 QML 的新手。我感谢互联网资源这手风琴：

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.*。因此，诸如 Line 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 并将新添加的对象重新分配给某个适当的容器。 因此，如果您想允许添加多个项目，请像这样：

example.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)

如果只是为了重新排序Items，您可以使用ObjectModel。那么您不应该提供委托，因为 ObjectModel 提供 delegate 本身 - 或者更确切地说是要显示的对象而不是委托。