qml flickable canvas load content doesn't resize and cannot flick

Question

I have a Flickable with a child Canvas and Image. I am loading an image into the source of the Image on a button click. That all works. The issue is the flickable doesn't refresh its dimensions to that of the image so that the whole image is "flickable" and I can scroll around it (it's bigger than the viewable window). However it does refresh if I resize the window and I can then flick around the image.

I guess this is because the window is being redrawn and qml is re-reading the img.width and img.height values to redraw the Flickable.

(FYI if I load an image in when I start the app, Flickable works as expected, it's only when I load an image on a button click, once the app is running that the window needs redrawing (or resizing) to get the Flickable to work as expected

Flickable {
    id: flickableCanvas
    anchors.fill: parent
    Item {
        id: source
        width: Math.max(parent.width,img.width)
        height: Math.max(parent.height,img.height)
    Image
    {
        id: img
    }
    Canvas {
        id: myCanvas
        }
    }
}

Connections {
    target: QmlBridge
    onLoadImage: {
        img.source = p
        myCanvas.requestPaint()
        flickableCanvas.contentWidth = img.width
        flickableCanvas.contentHeight = img.height
    }

}

Answer 1

It looks like you are trying to access the width/height of the image before it had been loaded.

You should move your Flickable contentWidth/contentHeight assignment under the Image component:

Image {
    id: im
    onStatusChanged: {
        if (status === Image.Ready) {
            flickableCanvas.contentWidth = img.width
            flickableCanvas.contentHeight = img.height
        }
    }
}

// ...

Connections {
    target: QmlBridge
    onLoadImage: {
        img.source = p
        myCanvas.requestPaint()
        // flickableCanvas.contentWidth = img.width
        // flickableCanvas.contentHeight = img.height
    }

}

But I think you don't even have to manually set these properties. You can do much simpler by just binding them to your img width/height:

Flickable {
    id: flickableCanvas
    anchors.fill: parent
    contentWidth: img.width // no need for future assignment
    contentHeight: img.height
    // ...
}