Positioning an item into a Flickable
-
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.
-
-
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.
-
@VTiTux You need to calculate
contentX
andcontentY
depending upon the image size and itsImage
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.
-
Yes, it works.
But if you replacewidth: 200; height: 200
byanchors.fill: parent
, your code doesn't work.Is it a bug of Flickable, no? Do I need to open a bug report?
-
@VTiTux Ofcourse it wont work as there's no parent to fill the child. Dimensions need to be specified somewhere.
-
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" } } } } }
-
@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. -
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.