ScrollView inside multiple columns



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

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.