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

但是，我希望能够更改项目索引（位置），这要归功于＆＃34;拖放＆amp;降＆＃34;技术

我读到在列布局中更改索引并不是那么好和容易。所以我试着将我的手风琴放在 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

好的，这里有些问题：

如果您的PanelItem不在*Layout，则无法使用附加的属性Layout.*。因此，第5行：Layout.fillWidth = true等行不起作用。使用width: parent.width或anchors { left: parent.left; right: parent.rigth }设置宽度。
我不会建议使用default property var contentItem，因为这可能会导致一些被遗忘的对象。您可以将多个Items分配给此默认属性，其中每个新Item都会启动前Item。
请改用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)

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

如何将ListView与自定义项QML一起使用

1 个答案: