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.


  • Moderators

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



  • 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.


  • Moderators

    @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.



  • 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?


  • Moderators

    @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" }
    
               }
    
            }
        }
    }
    

  • Moderators

    @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.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.