Question

我MouseArea内的Scrollview内有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{}
        //...
    }
}

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

1 个答案: