QML MouseArea onWheel 事件在 QML Scrollview 内无法正常工作

Question

我在 Scrollview 内有一个 MouseArea 在 Rectangle 内。我实现了一个缩放功能，可以在按下 ctrl 并滚动鼠标滚轮时放大/缩小。但是，它仅在ScrollView 一直位于顶部时才会放大，并且仅当ScrollView 一直位于底部时才会缩小。还有一些额外的逻辑来处理文件的外部拖放。只要TextEdit 中的文本足够大以获取ScrollView，就应该能够复制该问题。显然这是以前的错误，但我无法使其正常工作。我还尝试了以下链接中的解决方案：

QtQuick2: Handle onWheel event inside of a ScrollView

Rectangle {
    id: palGenRectangle
    Layout.minimumWidth: 50
    property string display
    //width:800
    color: "white"

    ScrollView {
        id: palGenTextScrollView
        anchors.fill: parent

            MouseArea {
            id: mouseArea
            anchors.fill: parent
            onWheel: {
                if (wheel.modifiers & Qt.ControlModifier){
                    if (wheel.angleDelta.y > 0)
                    {
                        mainTextEdit.font.pixelSize++
                        console.log("+++++")
                    }
                    else
                    {
                        mainTextEdit.font.pixelSize--
                        console.log("-----")
                    }

                }
                else{
                    wheel.accepted=true
                }
            }
        }

        DropArea {
            anchors.fill: parent
            onEntered: {
                palGenRectangle.color = "light blue"
            }
            onExited: {
                palGenRectangle.color = "white"
            }
            onDropped: {
                palGenRectangle.color = "white"
            if (drop.hasText) {
                if (drop.proposedAction == Qt.MoveAction || drop.proposedAction == Qt.CopyAction) {
                    fileio.setPalFileTextFromFile(drop.text)
                    fileio.mainTextEdit = mainTextEdit.textDocument
                    drop.acceptProposedAction()
                }
            }
        }
    }
    Item {
        id: draggable
        anchors.fill: parent
        Drag.active: mouseArea.drag.active
        Drag.hotSpot.x: 0
        Drag.hotSpot.y: 0
        Drag.mimeData: { "text/plain": palGenRectangle.display }
        Drag.dragType: Drag.Automatic
        Drag.onDragStarted: 
        Drag.onDragFinished: {
            if (dropAction == Qt.MoveAction) {
                item.display = ""
            }
        }
    }


    TextEdit {
        id: mainTextEdit
        text: fileio.palFileText
        wrapMode: TextEdit.Wrap
        selectByMouse: true
        onTextChanged: {
            if (fileio.palFileText !== mainTextEdit.text)
                fileio.textIsModified = true
            else
                fileio.textIsModified = false
        }
    }
}

Answer 1

为了使这个答案更清楚，请先将鼠标区域从代码中提取到ZoomArea 组件：

//ZoomArea.qml
MouseArea {
    onWheel: {
        if (wheel.modifiers & Qt.ControlModifier){
            if (wheel.angleDelta.y > 0)
            {
                mainTextEdit.font.pixelSize++
            }
            else
            {
                mainTextEdit.font.pixelSize--
            }
            wheel.accepted=true
        }
        else{
            wheel.accepted=false
        }
    }
}

请注意，wheel.accepted 与您的代码不同。如果触发缩放，它应该接受滚轮事件。否则当它缩放时，它也会滚动，这很奇怪。

在您的代码中，ZoomArea 无法正常工作，因为有多个内容项分配给了ScrollView。在固定bug 的示例代码中，只有一个Item。换句话说，您可以使用Item 包装所有组件并将其添加到ScrollView：

ScrollView {
    id: palGenTextScrollView

    Item {
        id: mainTextContent
        width: mainTextEdit.paintedWidth
        height: mainTextEdit.paintedHeight

        ZoomArea {
            id: mouseArea
            anchors.fill: parent
        }
        DropArea {}
        Item { id: draggable}
        TextEdit { id: mainTextEdit}
    }
}

当鼠标光标在文本上时它可以工作。但是，如果TextEdit 中只有一个字符，则如果鼠标光标位于视图中的空白区域，则缩放不起作用。为了让它更好，mainTextContent 应该填写ScrollView：

ScrollView {
    id: palGenTextScrollView

    property int scrollBarWidth: 15
    anchors.fill: parent

    Item {
        id: mainTextContent
        width: Math.max(
            mainTextEdit.paintedWidth, 
            palGenTextScrollView.width - palGenTextScrollView.scrollBarWidth)
        height:Math.max(
            mainTextEdit.paintedHeight, 
            palGenTextScrollView.height - palGenTextScrollView.scrollBarWidth)

        ZoomArea{}
        //...
    }
}