ScrollView inside multiple columns

[PetrM]

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?

[PetrM]

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"
                        }
                    }
                }
            }
        }
    }
}