QML MouseArea onWheel事件無法正常工作時內部QML滾動視圖

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{} 
     //... 
    } 
}