Как удалить границы компонента Flickable QML?

Question

Я хочу отображать большой объем контента, например сетку из нескольких изображений внутри окна, которое меньше, чем контент, аналогично географической карте, но вместо карты мне нужны мои собственные компоненты в качестве "карта".Для этого минимального рабочего примера, давайте возьмем для контента сетку изображений с общим размером 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 представлению внутри содержимого, как и ожидалось, но как только вы начинаете пролистывать содержимое для просмотра различных его частей.вы остановлены границами, мешающими вам видеть что-либо за пределами этих границ.Вы можете видеть это при перетаскивании, но как только вы отпустите, представление контента будет сброшено до этих границ.

Так как мне удалить эти границы?(Или есть другой компонент, более подходящий для моего приложения?)

Вот рисунок, который показывает, как контент можно перетаскивать за границы, но после его выхода он будет идти только до границ, а не дальше.

Answer 1

Я обнаружил проблему, неправильно установил contentWidth и contentHeight Flickable, этот пример работает нормально. ContentWidth и contentHeight определяют границы, в которых вы можете пролистывать.