使用GridView显示ListElements的variuos大小

我对qml相对较新，也许我的尝试是错误的，所以，如果你有另一个解决问题的想法，请不要犹豫，写下来 .

Problem:

我需要显示ListElemts的varoius大小（可以拖放） . 主要容器是200px x 180px . smalles List元素为100px x 60px，secound大小应为200px x 60px，最大值应为200px x 120 px . 所以我找到了一个Qt示例并根据我的需要对其进行了修改，但是我对ListElements的自动放置存在问题 .

它适用于像这里这样的小型ListElements：

现在，如果我需要一个大的，GridView将它们放在像这样的Expample：

在此示例中，View的宽度大得多，如200px . （ grab ListElements可能会以其他方式对它们进行排序，但不合适 . ）

在上一次测试中，我删除了CellWidth和Cell height：

该traget将显示200px x 180px网格中的所有单元格 . 如上所述，也许我的尝试是错误的 . 你们其中任何人都有我的解决方案吗？这是修改后的代码 . 为了测试，我注释掉了东西并改变了size属性：

Window {
visible: true
width: 480
height: 272
title: qsTr("Hello World")


GridView {
    id: root
    width: 200; height: 180
    cellWidth: 100; cellHeight: 60

    displaced: Transition {
        NumberAnimation { properties: "x,y"; easing.type: Easing.OutQuad }
    }

//! [0]
    model: DelegateModel {
//! [0]
        id: visualModel
        model: ListModel {
            id: colorModel
            ListElement { color: "blue"; size:1}
            ListElement { color: "green"; size:1 }
            ListElement { color: "red"; size: 1 }
           ListElement { color: "yellow"; size: 1 }
           ListElement { color: "orange"; size: 1 }
           ListElement { color: "purple"; size: 1 }
        }
//! [1]
        delegate: MouseArea {
            id: delegateRoot

            property int visualIndex: DelegateModel.itemsIndex

            width:{
               switch (model.size) {
               case 1:
                   return 100;
               case 2:
                   return 200;
               case 3:
                   return 200;
               }

            }
            height: {
                switch (model.size) {
                case 1:
                    return 60;
                case 2:
                    return 60;
                case 3:
                    return 120;
                }
            }

            drag.target: icon

            Rectangle {
                id: icon
                width:{
                   switch (model.size) {
                   case 1:
                       return 100;
                   case 2:
                       return 200;
                   case 3:
                       return 200;
                   }

                }
                height: {
                    switch (model.size) {
                    case 1:
                        return 60;
                    case 2:
                        return 60;
                    case 3:
                        return 120;
                    }
                }
                anchors {
                    horizontalCenter: parent.horizontalCenter;
                    verticalCenter: parent.verticalCenter
                }
                color: model.color
                radius: 3

                Drag.active: delegateRoot.drag.active
                Drag.source: delegateRoot
                Drag.hotSpot.x: icon.width/2
                Drag.hotSpot.y: icon.height/2

                states: [
                    State {
                        when: icon.Drag.active
                        ParentChange {
                            target: icon
                            parent: root
                        }

                        AnchorChanges {
                            target: icon;
                            anchors.horizontalCenter: undefined;
                            anchors.verticalCenter: undefined
                        }
                    }
                ]
            }

            DropArea {
                anchors { fill: parent; margins: 0 }

                onEntered: visualModel.items.move(drag.source.visualIndex, delegateRoot.visualIndex)
            }
        }
//! [1]
    }
}

}

提前感谢您的所有想法/建议！

编辑：

要清除问题，这里有拖放项目时显示正确重新排列的gif：

这张照片显示了我所描述的问题 . 有些项目重叠：

这张图片显示了没有设置GridView的cellWidth和cellHeight的问题 .

据我所知，GridView不关心其元素的大小 . 定位元素取决于cellWith和cellHeight值 . 但是有可能按照我需要的方式配置GridView（不要重叠，让项目不要超出债券）吗？或者GradView可能是错误的尝试实现这一点？如果有人需要更多信息，我很乐意提供！