ScrollView inside multiple columns
Solved
QML and Qt Quick
-
Hello all,
I have a problem with scrolling two columns of images separately.This code works as I expect (single column of images):
import QtQuick 2.9 import QtQuick.Controls 2.2 import QtQuick.Layouts 1.3 ApplicationWindow { visible: true width: 800 height: 600 Item { anchors.fill: parent ScrollView { anchors.fill: parent ColumnLayout { anchors.fill: parent Repeater { model: 16 delegate: Loader { sourceComponent: Image { width: 400 height: 300 source: "file:///C://MyImage1.jpg" } } } } } } }
The scrollbar is displayed on the right side of the window and I can scroll by mouse wheel.
Now I put the code above into two columns:
import QtQuick 2.9 import QtQuick.Controls 2.2 import QtQuick.Layouts 1.3 ApplicationWindow { visible: true width: 800 height: 600 RowLayout { anchors.fill: parent Item { Layout.fillHeight: true ScrollView { anchors.fill: parent ColumnLayout { anchors.fill: parent Repeater { model: 16 delegate: Loader { sourceComponent: Image { width: 400 height: 300 source: "file:///C:/MyImage1.jpg" } } } } } } Item { Layout.fillHeight: true ScrollView { anchors.fill: parent ColumnLayout { anchors.fill: parent Repeater { model: 16 delegate: Loader { sourceComponent: Image { width: 400 height: 300 source: "file:///C:/MyImage2.jpg" } } } } } } } }
Now the scrolling behaviour is strange:
- The scrollbar for the right column is displayed on its left side overlapping the left column and it is not possible to scroll the column by the mouse wheel. The scrolling is possible by holding the scrollbar slider only.
- The scrollbar for the left column is not displayed at all (or it is displayed outside the window on the left side) and again the scrolling is not possible by the mouse wheel.
I'd expected both scrollbars would be displayed on the right side of the corresponding columns and the mouse wheel scrolling should work for both columns separatelly as well.
So my question is how to make it work?
-
After some experiments I found a solution, see the code below. To tell the truth I don't know why this code works and the code above does not.
import QtQuick 2.9 import QtQuick.Controls 2.2 import QtQuick.Layouts 1.3 ApplicationWindow { visible: true width: 800 height: 600 RowLayout { anchors.fill: parent ScrollView { //anchors.fill: parent Layout.fillHeight: true Column { id: col Repeater { model: 16 delegate: Item { width: imageLeft.width height: imageLeft.height Image { anchors.centerIn: parent id: imageLeft width: 400 height: 300 source: "file:///MyImage1.jpg" } } } } } ScrollView { //anchors.fill: parent Layout.fillHeight: true Column { Repeater { model: 16 delegate: Item { width: imageRight.width height: imageRight.height Image { anchors.centerIn: parent id: imageRight width: 400 height: 300 source: "file:///MyImage2.jpg" } } } } } } }