1

我需要在我的应用程序中绘制一堆矩形。用户应该能够单独选择它们中的每一个并自由移动它们并改变它们的位置。用户还应该能够选择多个矩形并同时移动所有选定的矩形并将它们释放到其他地方。我已经可以基于 Gridview 实现一些可以处理一个矩形的选择和移动的东西，但是我不能让它适用于多个选择/移动。这是我目前拥有的一段代码：

GridView { 
        id: mainGrid
        cellWidth: 7;
        cellHeight: 7;

        ListModel {
            id: myModel
            function createModel() {
                for(var i = 0; i < totalZoneList.length; i++)
                {
                    for (var j = 0; j < moduleZoneList.length; j++)
                    {
                         myModel.append({"item1": ITEM1, "item2": ITEM2})
                    }
                }
            }
            Component.onCompleted: {createModel()}
        }

        Component { 
            id: myblocks
            Item {
                id: item
                width: mainGrid.cellWidth; 
                height: mainGrid.cellHeight;
                Rectangle {
                    id: box
                    parent: mainGrid
                    x: //CALCULATED BASED ON MODEL
                    y: //CALCULATED BASED ON MODEL
                    width: //CALCULATED BASED ON MODEL
                    height: //CALCULATED BASED ON MODEL


                    MouseArea {
                        id: gridArea
                        anchors.fill: parent
                        hoverEnabled: true
                        drag.axis: Drag.XandYAxis
                        drag.minimumX: 0
                        drag.minimumY: 0


                        property int mX: (mouseX < 0) ? 0 : ((mouseX < mainGrid.width - mainGrid.cellWidth) ? mouseX : mainGrid.width - mainGrid.cellWidth)
                        property int mY: (mouseY < 0) ? 0 : ((mouseY < mainGrid.height - mainGrid.cellHeight) ? mouseY : mainGrid.height - mainGrid.cellHeight)
                        property int index: parseInt(mX/mainGrid.cellWidth) + 5*parseInt(mY/mainGrid.cellHeight)  //item underneath cursor
                        property int activeIndex
                        property var xWhenPressed
                        property var yWhenPressed
                        propagateComposedEvents: true

                        onPressed: {
                            activeIndex = index
                            drag.target = box
                            xWhenPressed = box.x
                            yWhenPressed = box.y

                            gridArea.drag.maximumX = mainGrid.width - box.width
                            gridArea.drag.maximumY = mainGrid.height - box.height
                        }
                        onReleased: {
                           if(xWhenPressed !== box.x || yWhenPressed !== box.y)
                            {
                              //RECALCULATE THE POSITION
                            }
                        }
                        onPositionChanged: {
                            if (drag.active && index !== -1 && index !== activeIndex) {
                                                            mainGrid.model.move(activeIndex, activeIndex = index, 1)
                            }
                        }
                    } // Mousearea
                } // Rectangle
            } // Item
        } // Component

    } //mainGrid
4

2 回答 2

2

我没有设法让你的代码工作。首先，我看到了错误：

Rectangle {
    id: box
    parent: mainGrid
...
}

您只需要删除无用的父Item级，并将其设置Rectangle为委托的根即可。

然后，你忘了说拖动的目标是Rectangle

drag.target: parent

更正后的代码如下：

Component {
    id: myblocks

    Rectangle {
        id: box
        color: "red"
        width: 20
        height: 20

        MouseArea {
            id: gridArea
            anchors.fill: parent
            drag.target: parent
            hoverEnabled: true
            drag.axis: Drag.XandYAxis
        } // Mousearea
    } // Rectangle
} // Component

然后，您不应该使用 a GridView，因为您希望移动元素。如果您使用Repeater它，它可以工作，您只需设置x并y在Rectangle开头放置元素。

现在这是您的问题的解决方案：您单击一个元素以选择它，您可以一次移动所有选定的项目。

Window {
    visible: true
    width: 640
    height: 480

    property var totalZoneList: ["total1", "total2"]
    property var moduleZoneList: ["module1", "module2"]

    Repeater{
        id: iRepeater
        model: ListModel {
                    id: myModel
                    function createModel() {
                        for(var i = 0; i < totalZoneList.length; i++)
                        {
                            for (var j = 0; j < moduleZoneList.length; j++)
                            {
                                myModel.append({"item1": totalZoneList[i], "item2": moduleZoneList[j]})
                            }
                        }
                    }
                    Component.onCompleted: {createModel()}
                }
        delegate: myblocks

    }

    Component {
        id: myblocks

        Rectangle {
            id: box
            color: {
                switch(index){
                case 0: selected ? "red" : "#FF9999";break;
                case 1: selected ? "blue" : "lightblue";break;
                case 2: selected ? "green" : "lightgreen";break;
                case 3: selected ? "grey" : "lightgrey";break;
                }
            }
            x: (width + 5)*index

            width: 20
            height: 20
            property int offsetX:0
            property int offsetY:0
            property bool selected: false
            function setRelative(pressedRect){
                disableDrag();
                x = Qt.binding(function (){ return pressedRect.x + offsetX; })
                y = Qt.binding(function (){ return pressedRect.y + offsetY; })
            }
            function enableDrag(){
                gridArea.drag.target = box
            }
            function disableDrag(){
                gridArea.drag.target = null
            }

            MouseArea {
                id: gridArea
                anchors.fill: parent
                hoverEnabled: true
                drag.axis: Drag.XandYAxis
                onClicked: parent.selected=!parent.selected

                onPressed: {

                    var pressedRect = iRepeater.itemAt(index);
                    if (pressedRect.selected == true){
                        for (var i=0; i<iRepeater.count; i++ ){
                            var rect = iRepeater.itemAt(i);
                            if (i != index){
                                //init for breaking existing binding
                                rect.x = rect.x
                                rect.y = rect.y
                                rect.disableDrag()
                                if (rect.selected == true){
                                    rect.offsetX = rect.x - pressedRect.x
                                    rect.offsetY = rect.y - pressedRect.y
                                    rect.setRelative(pressedRect)
                                }
                            }
                        }
                        pressedRect.enableDrag()
                    }
                }
            } // Mousearea
        } // Rectangle
    } // Component
}
于 2016-10-05T08:58:54.590 回答
1

食谱一：

  1. 使用 a Repeater，所以定位不是由视图决定的，而是由你自己决定的。

  2. 使用隐形助手Item。这是你的drag.target。

  3. 实施您选择对象的首选方式 - 通过单击或绘制框并检查该框中包含哪些对象来实现天气。使所有选定对象的位置相对于您的不可见辅助对象。

  4. 拖动辅助对象，并相应地移动所有其他对象。

  5. 完成后，再次取消选择对象并使其位置绝对（在父坐标系内）

食谱二：

  1. 将所有选定对象重新设置为新项目，同时相应地映射它们的坐标

  2. 移动新项目

  3. 将所有对象重新映射回原始画布，将它们的坐标映射回来。

我希望这足以解决您的问题（据我所知）如果它解决了另一个问题，那么您需要更具体地了解拖动对象的预期行为。

于 2016-10-05T13:22:43.353 回答