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

问题描述

我有一个页面，我想在一个可滚动列表中按图像分开放置文本以测试 Qt，但是如果我想这样做，我必须硬定义每个图像和文本的 Y，但我不知道如何要通过正确的 YI 必须分配的好方法来获得它。此外，我的 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。

我尝试将 this 改编到我的代码中。

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

解决方法

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

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