如何更改 ColumnLayout 中的位置

Question

我是 QML 的新手，我制作了一个“手风琴”项目。我为此修改了一个不完整的 QML 项目。 为此，我使用 PanelItems ：

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: {
                    console.log("release !")
                    root.Drag.drop()
                }
                onClicked: {
                    if (root.parent.current !== root) {
                        console.log('test');
                       // if( (root.parent.currentItem !== null) )
                         // root.parent.currentItem.current = false;
                        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

现在我成功了，我希望在使用“拖放”功能的同时，可以在 ColumnLayout 中的两个不同 PanelItem 之间交换位置。

此时，我可以拖放我的项目，但我不知道如何在我的项目之间交换位置。

这是我的主要内容：

ApplicationWindow {
    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 来做，但我不能让它和我的 PanelItems 一起工作。

你有什么建议吗？我对 QML、Views 等有点迷茫。

非常感谢！

Answer 1

您可以使用Repeater 和ObjectModel 来填写您的ColumnLayout。 在那里您可以使用ObejctModel 的move(from, to, amount) 方法重新排列对象的顺序。

使用 拖放 需要做一些工作。您需要找出需要哪些索引，并可能添加一些动画以使其看起来更流畅。您可以尝试使用列布局的childAt(x,y) 以及DropArea.onDropped 处理程序中的drop.x, drop.y 来获取目标索引。

example1.qml：在ColumnLayout 中使用Repeater 和ObjectModel

ColumnLayout {
    id: test
    anchors.fill: parent
    spacing: 1
    property var currentItem: null
    Repeater {
        model: ObjectModel {
            id: om
            Button {
                text: '1'
                onClicked: om.move(ObjectModel.index, 0, 1)
                width: test.width
                height: 50
            }
            Button {
                text: '2'
                onClicked: om.move(ObjectModel.index, 0, 1)
                width: test.width
                height: 50
            }
            Button {
                text: '3'
                onClicked: om.move(ObjectModel.index, 0, 1)
                width: test.width
                height: 50
            }
            Button {
                text: '4'
                onClicked: om.move(ObjectModel.index, 0, 1)
                width: test.width
                height: 50
            }
            Button {
                text: '5'
                onClicked: om.move(ObjectModel.index, 0, 1)
                width: test.width
                height: 50
            }
            Button {
                text: '6'
                onClicked: om.move(ObjectModel.index, 0, 1)
                width: test.width
                height: 50
            }
        }
    }
}

为了让一切看起来更流畅，删除ColumnLayout 并移动到ListView 可能更容易，该ListView 针对模型的使用进行了优化，并具有添加、移动和置换对象的过渡。

example2.qml：将ColumnLayout 和Repeater 替换为ListView

ListView {
    id: test
    anchors.fill: parent
    spacing: 1
    model: ObjectModel {
        id: om
        Button {
            text: '1'
            onClicked: om.move(ObjectModel.index, 0, 1)
            width: test.width
            height: 50
        }
        Button {
            text: '2'
            onClicked: om.move(ObjectModel.index, 0, 1)
            width: test.width
            height: 50
        }
        Button {
            text: '3'
            onClicked: om.move(ObjectModel.index, 0, 1)
            width: test.width
            height: 50
        }
        Button {
            text: '4'
            onClicked: om.move(ObjectModel.index, 0, 1)
            width: test.width
            height: 50
        }
        Button {
            text: '5'
            onClicked: om.move(ObjectModel.index, 0, 1)
            width: test.width
            height: 50
        }
        Button {
            text: '6'
            onClicked: om.move(ObjectModel.index, 0, 1)
            width: test.width
            height: 50
        }
    }
}