Dynamic Image Scaling Problem

[Flu7x]

I’m having a bit of a qml issue. I have a pdf file that I’m extracting the images out of with Poppler. These images get loaded into the delegate of a ListView. Ideally, I would want these images to scale with the width of the ScrollView and hide the scrollbar if it’s not needed.

The width and height in the Image delegate are needed to scale the image up properly since the PreserveAspectFit doesn’t work with just one of the properties set, so it must use the implicitWidth and implicitHeight if width and height are not explicitly specified.

If the size of the ScrollView is then changed there is a small range where the ScrollBar of the ScrollView is in a state between “Hey, I’m needed” and “Oh, nevermind” and it starts to jitter heavily as follows.

EPILEPSY WARNING:

Here is the code which breaks. If anyone has any idea on how this can be fixed, I would truly appreciate it.

ScrollView {
    id: mainScrollView

    Layout.fillWidth: true
    Layout.fillHeight: true

    ListView {
        id: mainList

        width: mainScrollView.width
        height: mainScrollView.height

        model: WindowManager.pageNum
        spacing: Kirigami.Units.smallSpacing

        delegate: Image {
            width: mainList.width
            height: width * (sourceSize.height / sourceSize.width)
            fillMode: Image.PreserveAspectFit
            source: "image://Maki/" + (index + 1)
        }
    }
}

[ngraham]

You need to take into account the visibility of the scrollbar. If you’re using Qt 6.6. or later, the easiest way is using the effectiveScrollBarWidth property: ScrollView QML Type | Qt Quick Controls | Qt 6.11.1

[Flu7x]

I did in fact try that.

assigning

width: mainList.width - mainScrollView.effectiveScrollBarWidth

in the Image delegate just adds space between the image and the scroll bar, like that:

It does only do that when the scroll bar is visible. The jittering still exists.