单击 \ 在与另一个 Flickable 部分重叠的 Flickable 的空白区域中轻弹 [英] Click \ flick through emptry area of a Flickable that partially overlaps another Flickable

问题描述

我在底部有一个可轻弹的场景编辑器"，并停靠在其右侧，在其顶部有一个可轻弹的场景大纲"，它显示了场景结构的树.

I have a scene "editor" flickable on the bottom, and docked at its right side, a scene "outliner" flickable on top of it, which shows a tree of the scene structure.

  Flickable {
    id: editor
    anchors.fill: parent
    contentWidth: 5000
    contentHeight: 5000
    Repeater {
      model: 500
      delegate: Rectangle {
        width: Math.random() * 200 + 50
        height: width
        x: Math.random() * editor.contentWidth
        y: Math.random() * editor.contentHeight
        color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
        border.color: "black"
      }
    }
  }

  Flickable {
    id: outliner
    anchors.right: editor.right
    width: contentWidth
    height: parent.height
    contentWidth: contentItem.childrenRect.width
    contentHeight: contentItem.childrenRect.height
    Column {
      Repeater {
        model: 500
        delegate: Rectangle {
          width: Math.random() * 200 + 50
          x: outliner.contentWidth - width
          height: 50
          color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
          border.color: "black"
        }
      }
    }
  }

当然，我希望能够同时滑动两者来导航，因为它们都比可用的屏幕空间大.

Naturally, I want to be able to flick both to navigate both, since they both do get larger than the available screen real estate.

问题是大纲可轻弹只会阻止编辑器可轻弹，即使我从大纲项目不占据的位置轻弹.我不想那样，我想要的是仅当轻弹发生在大纲项目顶部时才轻弹大纲，否则我想跳到编辑器，这样我就可以单击并轻弹它从该区域到没错.

The problem is that the outliner flickable will simply block the editor flickable, even if I flick from a position that the outliner items do not occupy. I don't want that, what I want is to flick the outliner only if the flick happens on top of an outliner item, if not I want to skip through to the editor, so I can click and flick it from the area to the right.

由于 Flickable 的工作方式，我一直无法做到.它将首先检查拖动，并且只有当点击不超过拖动阈值时，它才会让点击向下到底层元素.所以我想不出只有在那个位置有物体的情况下才能轻弹的方法.

I haven't been able to do it, due to the way Flickable works. It will come in first to check for a drag, and only if the click doesn't exceed the drag threshold will it let the click down to underlying elements. So I can't think of a way to flick only if there is an object in that position.

有什么办法可以让事件处理做我想做的事吗?

Is there any way I can get the event handling to do what I want it to?

推荐答案

Mkay，我想我做到了，关键是禁用大纲的交互性，然后通过 MouseArea 拦截输入代表，然后仔细计时并测量手动拖动增量，如果足够快，则安排手动轻弹释放.

Mkay, I think I did it, the key was to disable the interactivity for the outliner, then intercept input via a MouseArea in the delegate, then carefully time and measure the manual dragging delta and if fast enough, schedule a manual flick on release.

让它在按下时停止正在进行的轻弹并随后从下一次拖动启动另一个轻弹在刚刚取消轻弹后被证明是有问题的，但是通过将每个轻弹延迟到下一个事件循环周期，我让它工作了.

Getting it to both stop an ongoing flick on press and subsequently launching another flick from the next drag turned out to be problematic after a flick has just been cancelled, but by delaying each flick to the next event loop cycle I got it working.

我还添加了车轮支撑等.

I also added wheel support and such.

如果有人在任何平台上遇到问题，请在评论中告诉我.

If anyone experiences problems with it on any platform, do let me know in the comments.

// the editor code is the same from the OP
  Flickable {
    id: outliner
    anchors.right: editor.right
    width: contentWidth
    height: parent.height
    contentWidth: contentItem.childrenRect.width
    contentHeight: contentItem.childrenRect.height
    interactive: false
    property int ly: 0
    property real lt: 0
    property int dy: 0
    function go(yy) {
      dy = contentY - (contentY -= yy - ly)
      ly = yy
      lt = Date.now()
    }
    Timer { 
      id: trigger
      interval: 1
      onTriggered: outliner.flick(0, outliner.dy * 150)
    }
    Column {
      Repeater {
        model: 500
        delegate: Rectangle {
          width: Math.random() * 200 + 50
          x: outliner.contentWidth - width
          height: 50
          color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
          border.color: "black"
          MouseArea {
            anchors.fill: parent
            Drag.active: drag.active
            drag.target: Item { id: dummy }
            onPressed: {
              dummy.y = 0
              if (outliner.flicking) outliner.cancelFlick()
            }
            onWheel: outliner.flick(0, wheel.angleDelta.y * 10)
            onPositionChanged: {
              if (drag.active) outliner.go(dummy.y)
            }
            onReleased: {
              if (Date.now() - outliner.lt < 50) trigger.start()
              outliner.ly = 0
              outliner.returnToBounds()
            }
          }
        }
      }
    }
  }

这篇关于单击 \ 在与另一个 Flickable 部分重叠的 Flickable 的空白区域中轻弹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！