时间戳

首页 > 解决方案 > 如何删除 Flickable QML 组件的边界？

qt - 如何删除 Flickable QML 组件的边界？

问题描述

我想显示大量内容，例如，在比内容更小的窗口内显示多个图像的网格，类似于地理地图，但我希望自己的组件作为“地图”而不是地图。对于这个最小的工作示例，让我们将总大小为 1000x1000 的图像网格作为内容，其中包含仅 300x300 的内容的窗口。

我尝试了 2 种不同的方法，但我只会详细介绍第一种方法，因为这是最接近我想要的结果的方法：

  1. 我已经尝试过 Flickable 组件，但内容无法移动到预定义的范围之外，从而使用户无法移动视图以显示内容的所有部分。因此，我现在正在考虑的最简单的解决方案是是否可以从 Flickable 组件中删除这些边界，但是如何？

  2. 我也尝试过 Map 组件，但它需要一个“插件”，我无法弄清楚如何将此组件与我自己的图像网格内容一起使用。

我想展示的内容是这样的

    Grid {
      columns: 5
      spacing: 2

      Repeater {
        model: ListModel { 
          ListElement {
            path: 'test1'
          }
          ListElement {
            path: 'test2'
          }
//        ...
          ListElement {
            path: 'test25'
          }
        }
        Rectangle {
          width: 200
          height: 200
          Image {
            anchors.fill: parent
            source: 'file:' + path
          }
        }
      }
    }

我试过了，像这样把它放在 Flickable 里面

Flickable {
    anchors.centerIn: parent
    width: 300
    height: 300
    contentWidth: 1000
    contentHeight: 1000
    clip: true

// INSERT CUSTOM GRID COMPONENT HERE
}

这会按预期在内容内产生 300x300 视图，但是一旦您开始浏览内容以查看其不同部分，您就会被边界阻止，阻止您看到超出这些边界的任何内容。您可以在拖动时看到它，但是一旦您释放内容的视图就会重置为这些边界。

那么如何消除这些界限呢？（或者是否有更适合我的应用程序的不同组件？）

这是一个 gif，显示了如何将内容拖动到边界之外，但一旦释放，它只会上升到边界而不是进一步

标签： qtqml

解决方案

我发现了问题，我错误地设置了 Flickable 的 contentWidth 和 contentHeight，这个例子工作正常。contentWidth 和 contentHeight 确定您可以轻拂的范围。

推荐阅读