首页 文章

如何重新排序QML Row的子项（使用拖放）？

提问于
浏览 次
0

比方说，我有一个QML Row ，它有一些子对象（不一定是同一类型） . 我希望能够随意重新排序 . 奖金是，能够为用户实现拖放行为 . 这是一个代码示例， Row 具有不同的组件，我想重新排序：

import QtQuick 2.5
import QtQuick.Controls 1.4


ApplicationWindow {
    visible: true
    width: 300
    height: 300

    Component {
        id: rect
        Rectangle {
            color: "blue"
        }
    }

    Component {
        id: rectWithText

        Rectangle {
            property alias text: txt.text
            color: "red"
            Text {
                id: txt
            }
        }
    }

    Row {
        id: r
        Component.onCompleted: {
            rect.createObject(r,{"width": 60,"height":40})
            rectWithText.createObject(r,{"width": 100,"height":40,text:"foo"})
            rect.createObject(r,{"width": 40,"height":40})
        }
    }
}

在QtWidgets中，有一些函数，如 layout->removeWidget(widget) ， layout->insertWidget(index,widget) 等，但它们似乎在QML中缺失 .

我发现了一些使用 ListView / GridView 和模型/委托方法的示例，但它们通常无法处理不同的组件，因此它们不能真正替代 Row .

有没有办法在QML中做到这一点，还是我运气不好？

drag-and-drop order qml qt5 qtquick2

2 回答

  • 3

    这有点像黑客但无论如何都有效 . 它不需要使用模型 .

    import QtQuick 2.3
import QtQuick.Window 2.2
import QtQuick.Controls 1.1

Window {
    visible: true
    function shuffle(array) {
        for (var i = array.length - 1; i > 0; i--) {
            var j = Math.floor(Math.random() * (i + 1));
            var temp = array[i];
            array[i] = array[j];
            array[j] = temp;
        }
        return array;
    }
    Column {
        id: column
        anchors.fill: parent
        anchors.centerIn: parent
        Button {
            text: "shuffle"
            onClicked: {
                var array = [button1, button2, button3]
                for (var a in array) { array[a].parent = null }
                array = shuffle(array)
                for (a in array) { array[a].parent = column }
            }
        }
        Button {
            id: button1
            text: "I am button 1"
        }
        Button {
            id: button2
            text: "I am button 2 "
        }
        Button {
            id: button3
            text: "I am button 3"
        }
    }
}
    回复于
  • 3
    import QtQuick 2.3
import QtQuick.Window 2.2
import QtQuick.Controls 1.1

Window {
    visible: true

    Component {
        id: buttonComponent
        Button { text: "I'm a button" }
    }

    Component {
        id: labelComponent
        Label { text: "I'm a label" }
    }

    property var buttonModel: [buttonComponent, labelComponent, buttonComponent, buttonComponent,labelComponent]

    function shuffle(array) {
        for (var i = array.length - 1; i > 0; i--) {
            var j = Math.floor(Math.random() * (i + 1));
            var temp = array[i];
            array[i] = array[j];
            array[j] = temp;
        }
        return array;
    }


    Column {
        anchors.fill: parent
        anchors.centerIn: parent
        Repeater {
            model: buttonModel
            Loader {
                sourceComponent: modelData
            }
        }
        Button {
            text: "shuffle"
            onClicked: buttonModel = shuffle(buttonModel)
        }
    }
}

    您也可以以相同的方式使用 ListView . 这为动画 Item 提供了更大的灵活性 .

    回复于

相关问题