如何在可滚动列表中显示文本和图像？

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。

有谁知道像其他语言一样自动执行此操作的组件吗？

编辑：我可以动态显示图像和文本，但滚动条不起作用并且弄乱了所有 ColumnLayout。

我尝试将改编成我的代码。

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

Answer 1

我用的是 Rectangle 而不是 Image，但这应该是你的目标，对吧？

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?

qt

qml

qt6