Positioning an item into a Flickable

[VTiTux]

Hello,

I display a big picture into a flickable view.

How to set the initial position?

By default, the top-left corner of my picture is aligned with the top-left corner of the view, but I would like to center it into the flickable.

Thanks.

[p3c0]

@VTiTux You can use contentX and contentY to set positions. Just calculate to center it.

[VTiTux]

Okay, it's perhaps a bug.

This code works:

Flickable{
            x:0
            y:0
            width: 800
            height: 800

            clip: true

            boundsBehavior: Flickable.StopAtBounds

            contentHeight: pic.height
            contentWidth: pic.width

            contentX: 1000
            contentY: 1000
            Image{
                id: pic
                source: picture.jpg
                height: 1600
                width: 2600
            }
        }

But my original code doesn't work (see the anchors):

Flickable{
            anchors.fill: parent

            clip: true

            boundsBehavior: Flickable.StopAtBounds

            contentHeight: pic.height
            contentWidth: pic.width

            contentX: 1000
            contentY: 1000
            Image{
                id: pic
                source: picture.jpg
                height: 1600
                width: 2600
            }
        }

And this code doesn't work too (see height/width):

Flickable{
            x:0
            y:0
            width: parent.width
            height: parent.height

            clip: true

            boundsBehavior: Flickable.StopAtBounds

            contentHeight: pic.height
            contentWidth: pic.width

            contentX: 1000
            contentY: 1000
            Image{
                id: pic
                source: picture.jpg
                height: 1600
                width: 2600
            }
        }

For the two last exemples, the top-left corners are aligned. ContentX/Y have no effects.

[p3c0]

@VTiTux You need to calculate contentX and contentY depending upon the image size and its Image holder viz. Flickable. Try following:

import QtQuick 2.4

Flickable {
    id: flickable
    width: 200; height: 200
    contentWidth: image.width; contentHeight: image.height

    Image { id: image; source: "http://placehold.it/800&text=Qt" }

    contentX: image.width/2-flickable.width/2
    contentY: image.height/2-flickable.height/2
}

This will fetch image from the web and center it. If it doesn’t work try putting another image.

[VTiTux]

Yes, it works.
But if you replace width: 200; height: 200 by anchors.fill: parent, your code doesn't work.

Is it a bug of Flickable, no? Do I need to open a bug report?

[p3c0]

@VTiTux Ofcourse it wont work as there's no parent to fill the child. Dimensions need to be specified somewhere.

[VTiTux]

In fact I need to use constants, not a formule for contentX/Y, because it is not exactly the center that I want. (The real position is calculated from my c++ side.)

Can you try this code (it is close to my real code) and explain me why the line (3) works with the line (2) but doesn't work with the line (1), while the line (4) works with both?

Thank you.

ApplicationWindow {
    title: qsTr("Hello World")
    visibility: Window.Maximized
    visible: true
    

    Item{
        anchors.fill: parent

        Item{
           anchors.verticalCenter: parent.verticalCenter
           anchors.horizontalCenter: parent.horizontalCenter
           width: 500; height: 500
           clip: true

           Flickable{
                id: flickable

                anchors.fill: parent                    //line (1)
                //width: 500; height: 500               //line (2)

                contentX: 150; contentY: 150            //line (3)
                //contentX: image.width/2-flickable.width/2; contentY: image.height/2-flickable.height/2    //line (4)


                contentWidth: image.width; contentHeight: image.height

                Image { id: image; source: "http://placehold.it/800&text=Qt" }

           }

        }
    }
}

[p3c0]

@VTiTux I'm not sure what exactly is causing this. But I found that it works properly with a local file (save that image and use). May be it has some connection with image being fetched over the network. I guess with anchors.fill: parent it is not able to calculate the dimensions properly while the image is still loading from network. With local it is instant. I could be wrong though. It could also be a bug. I would suggest you to ask it on Qt Interest Mailing List.

[VTiTux]

You are right. It works with a local file.

I had an another exemple where a local file failed too, but I don't remember the code.

I will ask on the mailint list.

Thank you very much.