QML实现鼠标左键按下时标记经过矩形的功能问询

要实现类似Excel按住左键拖拽选中单元格的效果，核心是维护全局拖拽状态和选中项集合，通过绑定逻辑统一控制颜色，避免直接修改属性破坏原始逻辑。以下是修改后的代码及关键调整点：

修改后完整代码 #

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

ApplicationWindow {
    width: 640
    height: 480
    visible: true
    title: qsTr("Excel-like Selection")
    property string defaultColor: "#444"
    property bool isDragging: false
    property var selectedItems: []

    GridLayout{
        anchors.fill: parent
        columns: 2

        Repeater{
            model: 6
            delegate: Rectangle{
                id: rect
                color: {
                    if (isDragging && selectedItems.indexOf(rect) !== -1)
                        "orange"
                    else if (mouseArea.containsMouse && !isDragging)
                        "orange"
                    else
                        defaultColor
                }
                Layout.fillWidth: true
                Layout.fillHeight: true

                Text {
                    text: modelData
                    anchors.fill: parent
                    color: "#eee"
                    font.pixelSize: 40
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                }

                MouseArea{
                    id: mouseArea
                    anchors.fill: parent
                    acceptedButtons: Qt.LeftButton | Qt.RightButton
                    hoverEnabled: true

                    onPressed: {
                        if (mouse.button === Qt.LeftButton) {
                            isDragging = true
                            selectedItems = [rect]
                        } else if (mouse.button === Qt.RightButton) {
                            isDragging = false
                            selectedItems = []
                        }
                    }

                    onReleased: {
                        if (mouse.button === Qt.LeftButton) {
                            isDragging = false
                            selectedItems = []
                        }
                    }

                    onEntered: {
                        if (isDragging && selectedItems.indexOf(rect) === -1) {
                            selectedItems.push(rect)
                        }
                    }
                }
            }
        }
    }
}

关键调整点 #

• 全局状态维护：新增isDragging（标记是否处于左键拖拽状态）和selectedItems（存储选中的Rectangle实例）两个全局属性，统一管理选中逻辑。
• 颜色绑定逻辑：通过表达式绑定color属性，优先级为：拖拽选中项 > 非拖拽时悬停项 > 默认颜色，避免直接修改属性导致的状态混乱。
• 合并MouseArea：将原两个MouseArea合并为一个，避免事件冲突，同时开启hoverEnabled处理悬停事件。
• 拖拽交互逻辑：
  • 左键按下：激活拖拽状态，将当前项加入选中列表；
  • 鼠标进入项：若处于拖拽状态，自动将当前项加入选中列表；
  • 左键松开：关闭拖拽状态并清空选中列表，所有项恢复默认颜色；
  • 右键按下：直接清空选中状态，快速恢复默认。

内容的提问来源于stack exchange，提问作者Collaxd