How to display text and image in a scrollable list?

Question

I have a page where I want to put text separate by image in a scrollable list to test Qt, but if I want to do that, I must hard define the Y of each image and text but I don't know how to get that by the good way to have the exact Y I must assign. Also, my ScrollView doesn't work (I can't scroll vertically).

The page:

import QtQuick 2.15
import QtQuick.Controls 2.15

Page {
    id: page
    width: window.width
    height: window.height

    title: qsTr("Text & Images")

    ScrollView {
        width: parent.width
        height: parent.height

        ListView {

            Image {
                source: "/images/test1.png"
                anchors.horizontalCenter: parent.horizontalCenter
                height: Image.height
            }
            
            Repeater {
                model: 5

                Label {
                    text: qsTr(txts["text" + (index + 1)])
                    anchors.horizontalCenter: parent.horizontalCenter
                    y: index * 400
                }

                Image {
                    source: "/images/test" + (index + 2) + ".png"
                    anchors.horizontalCenter: parent.horizontalCenter
                    y: index * 400 + 200
                    fillMode: Image.PreserveAspectFit
                }
            }
        }
    }
}

If I don't set the Y, all image are display in y:0.

Do anyone know a component who do that automatically like other languages ?

Edit: I can display image and text dynamically but the scrollbar doesn't work and mess up all the ColumnLayout.

I try to adapt this into my code.

ColumnLayout {
   anchors.fill: parent

    ListView {
        flickableDirection: Flickable.VerticalFlick
        boundsBehavior: Flickable.StopAtBounds
        Layout.fillWidth: true
        Layout.fillHeight: true
        ScrollBar.vertical: ScrollBar {}

        Image {
            source: "/images/test1.png"
        }

        Repeater {
            model: 5


            Label {
                text: qsTr(txts["text" + (index + 1)])
            }

            Image {
                source: "/images/test" + (index + 2) + ".png"
            }
        }
    }
}

user_525038 · Answer

Instead of Images I used Rectangles, but this should be what you are aiming for, right?

import QtQuick 2.12
import QtQuick.Controls 2.15

Rectangle {
    width: 320
    height: 240
    color: "lightGray"

    ListView {
        id: myListView

        anchors.fill: parent

        ScrollBar.vertical: ScrollBar {
            id: control

            active: true
            interactive: true

            padding: 0
            size: 1.0
            position: 1.0

            contentItem: Rectangle {
                id: controlHandle
                implicitWidth: 10
                implicitHeight: 4
                radius: width / 2
                color: "yellow"
            }

            background: Rectangle {
                id: controlTrack
                color: "green"
            }
        }

        header: Rectangle {
            width: myListView.width
            height: 40
            color: "darkGray"

            Text {
                anchors.centerIn: parent
                text: "Header"
            }
        }

        model: 20
        delegate: Item {
            width: myListView.width
            height: childrenRect.height

            Column {
                Rectangle {
                    width: myListView.width
                    height: 60
                    color: "gray"

                    Text {
                        anchors.centerIn: parent
                        text: "This is image #" + modelData
                    }
                }

                Text { text: "Subtitle " + modelData }
            }
        }
    }
}

How to display text and image in a scrollable list?

1 Answers