在 QML Scrollview 中时，QML MouseArea onWheel 事件无法正常工作

Question

我有一个 MouseArea 里面有一个 Scrollview 里面有一个 Rectangle。我实现了一个缩放功能，当按下 ctrl 并滚动鼠标滚轮时，缩放 in/out。但是，只有当 ScrollView 一直在顶部时才会放大，只有当 ScrollView 一直在底部时才会缩小。有一些额外的逻辑来处理文件的外部拖放。只要 TextEdit 中的文本大到足以得到 ScrollView，问题就应该能够重现。显然这是以前的一个错误，但我无法让它正常工作。我也尝试了下面的解决方案 link:

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 中只有一个字符，并且鼠标光标在视图中为空 space，则缩放不起作用。为了让它更好，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{}
        //...
    }
}

在 QML Scrollview 中时，QML MouseArea onWheel 事件无法正常工作

QML MouseArea onWheel event not working properly when inside QML Scrollview

qt

qml

qtquick2