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的{{1}} - 方法重新排列对象的顺序。

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

example1.qml：在DropArea.onDropped
中使用Repeater和ObjectModel

ColumnLayout

为了使一切看起来更流畅，可能更容易放弃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针对模型的使用进行了优化，并且具有添加，移动和移动对象的过渡

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

如何更改ColumnLayout中的位置

1 个答案: