Qt QML - Как отображать текст и изображение в прокручиваемом списке

Question

У меня есть страница, на которой я хочу поместить текст отдельно по изображениям в прокручиваемом списке для тестирования Qt, но если я хочу это сделать, я должен жестко определить Y каждого изображения и текста, но я не знаю, как это получить кстати, чтобы получить точное значение Y, которое я должен назначить. Кроме того, мой ScrollView не работает (я не могу прокручивать по вертикали).

Страница:

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

Если я не установил Y, все изображения будут отображаться в y:0.

Кто-нибудь знает компонент, который делает это автоматически, как и другие языки?

Answer 1

Вместо Imageя использовал Rectangles, но это должно быть то, к чему вы стремитесь, верно?

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