Question

如何重新排序GridLayout（或其他QML项目容器）中的项目？我有一个有一些行和列，并填充了子项。直到几分钟前，我希望我可以简单地操作项目的children列表成员对它们进行重新排序：我在UI中有一个MouseArea按钮，我希望可以从中简单地调用（来自onClicked:）a

function reorder() {children.unshift(children.pop());}

布局项的方法（布局中最后一项的意图成为第一项），但是当触发时会生成错误消息：

TypeError: Property 'pop' of object [object Object] is not a function

并且在任何情况下我都注意到文档说children是只读的。

有一种简单的方法吗？（关于动态对象管理的documentation实际上并不仅仅包括创建和销毁子对象。）

Answer 1

您可以使用row和column附加属性。

Answer 2

在Mitch回答之后，我想出了这个：

  function reorder() {
    for (var i=0;i<children.length;i++) {
      var index=columns*children[i].Layout.row + children[i].Layout.column;
      var newIndex=(index+1)%(rows*columns);
      children[i].Layout.row=Math.floor(newIndex/columns)%rows;
      children[i].Layout.column=newIndex%columns;
    }
  }

有几点需要注意：

要实现此功能，您必须已在已包含的项目上明确设置Layout.row和Layout.column。如果您依赖GridLayout的单元格分配，则附加属性保持为零。这有点令人惊讶，因为我最初阅读documentation暗示GridLayout实际上设置了这些本身，如果你没有。
您还需要在布局上明确设置rows和columns（对于从左到右的布局，只需设置用于布局包装目的的列，您就可以离开...但是然后是行属性无论添加了多少行子项，都保持为-1，上述代码将失败。
随着项目的混乱，它会发出一些控制台警告，例如QGridLayoutEngine::addItem: Cell (1, 1) already taken。虽然看起来很难受到伤害。
显然，以上只是真正期待处理完全填充的单细胞物品网格。

Answer 3

您可以通过更改GridLayout中各项的父项来执行如初所述的弹出/推送式操作。通过从GridLayout取消父项，将其从GridLayout的任何索引中弹出。通过再次将其重新父级化到GridLayout，将其推到GridLayout的末尾。在这两个操作之间，您可以通过按特定顺序推动和弹出所有子项在任何位置插入项目，而不必另外管理每个项目的行/列，而将自动布局留给GridLayout。

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.9
import QtQuick.Layouts 1.3

Window {
    id: window
    visible: true
    height: 600
    width: 800

    GridLayout {
        id: grid
        columns: 4
        Rectangle {
            id: rect1
            color: Qt.rgba(Math.random()*0.5 + 0.25, Math.random()*0.5 + 0.25, Math.random()*0.5 + 0.25, 1)
            height: 20
            width: 20
        }
        Rectangle {
            id: rect2
            color: Qt.rgba(Math.random()*0.5 + 0.25, Math.random()*0.5 + 0.25, Math.random()*0.5 + 0.25, 1)
            height: 20
            width: 20
        }
        Rectangle {
            id: rect3
            color: Qt.rgba(Math.random()*0.5 + 0.25, Math.random()*0.5 + 0.25, Math.random()*0.5 + 0.25, 1)
            height: 20
            width: 20
        }
        Rectangle {
            id: rect4
            color: Qt.rgba(Math.random()*0.5 + 0.25, Math.random()*0.5 + 0.25, Math.random()*0.5 + 0.25, 1)
            height: 20
            width: 20
        }
        Rectangle {
            id: rect5
            color: Qt.rgba(Math.random()*0.5 + 0.25, Math.random()*0.5 + 0.25, Math.random()*0.5 + 0.25, 1)
            height: 20
            width: 20
        }
    }

    Item {
        id: item
        visible: false
    }

    Button {
        text: "push first item to rear of gridview"
        anchors.bottom: parent.bottom
        onClicked: {
                var object = grid.children[0] 
                object.parent = item // pop from grid
                object.parent = grid // push to grid
        }
    }
}

如何重新排序QML GridLayout中的项目？

3 个答案: