2

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"
            }
        }
    }
}
Tryliom
  • 695
  • 1
  • 7
  • 31
  • Use [RowLayout](https://doc.qt.io/qt-5/qml-qtquick-layouts-rowlayout.html) instead, setting absolute hardcoded position is weird. – folibis Feb 16 '21 at 12:27
  • A Repeater simply creates a bunch of items. You still need a positioner/layout to tell those items where to go. Look at Row/Column or RowLayout/ColumnLayout. – JarMan Feb 16 '21 at 18:35
  • Actually, are you intending the text/images to be delegates in your ListView? Then get rid of the Repeater altogether. Encapsulate your Label/Image within an Item, and assign that Item to the ListView’s delegate property. Read ListView’s documentation for examples. – JarMan Feb 16 '21 at 18:39
  • You also don't need to nest a `ListView` in a `ScrollView`, the `ListView` itself is also capable of showing scrollbars and allow scrolling. https://stackoverflow.com/questions/45650226/qml-attach-scrollbar-to-listview – iam_peter Feb 17 '21 at 08:50
  • RowLayout work for place them dynamically but @iam_peter the scrollbar doesn't work like the response in the link you sent, I will update the question with current code – Tryliom Feb 23 '21 at 07:36

1 Answers1

1

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 }
            }
        }
    }
}
iam_peter
  • 589
  • 1
  • 7
  • 23