Qroll ScrollView with ColumnLayout

Question

I am trying to create a scroll view around ColumnLayout, unfortunately my current code is not working. I know about ListView, but in my case I need to create a scrollable layout because it will contain dissimilar elements.

ApplicationWindow {
    id: mainwindow
    title: qsTr("Hello World")
    width: 300
    height: 300
    visible: true

    ScrollView {
        anchors.fill: parent

        ColumnLayout {
            width: mainwindow.width

            Image {
                anchors.bottomMargin: 10
                source: "img/button.jpg"
                width: parent.width
                height: 400
            }

            Image {
                source: "img/button.jpg"
                width: parent.width
                height: 500
            }
        }
    }
}

This refers to this (which is clearly not what I want):

There are two problems:

• Images are not stretched across the entire width of the window, parent.width is ignored. I want the images to have the same width as the ScrollView (without horizontal scrolling)
• The image height property is ignored.

What am I doing wrong?

Answer 1

width id. , , , ColumnLayouts .

:

ScrollView 
{
    anchors.fill: parent

    Column {

        Repeater {
            model: 4;
            delegate: Item {
                width: root.width;
                height: image.sourceSize.height;

                Image {
                    id: image;
                    anchors.centerIn: parent;
                    width: parent.width;
                    fillMode: Image.Stretch;
                    source: "img" + (index+1) + ".png"
                }
            }
        }
    }
}

root - . , !

Answer 2

. :

ScrollView {
    width: parent.width
    height : parent.height
    contentWidth: column.width    // The important part
    contentHeight: column.height  // Same
    clip : true                   // Prevent drawing column outside the scrollview borders

    Column {
        id: column
        width: parent.width

        // Your items here
    }
}