Center all Items to the middle of the screen



  • Helo,

    My Code is the following:

    Grid {
                id: myGrid
                rows: 4
                columns: 1
                width: parent.width
                height: partent.height
                spacing: 50
                anchors.horizontalCenter: parent.horizontalCenter
    
    
    
                Image {
                         id: circleImage
                         source: "circle.png"
                          // the CircleCollider has its origin in the center, not top-left
                         anchors.horizontalCenter: parent.horizontalCenter
                         Text { anchors.centerIn: parent
                                font.pointSize: 48; text: accelerometer.steps }
                }
    
                Label {
                    id: labelSteps
                    text: "Schritte"
    
                    anchors.horizontalCenter: circleImage.horizontalCenter
                    anchors.top: circleImage.bottom
                    anchors.topMargin: 5
                }
    
                Image {
                         id: circleImage2
                         source: "circle2.png"
                         anchors.horizontalCenter: labelSteps.horizontalCenter
                         anchors.top: labelSteps.bottom
                         anchors.topMargin: 40
                         Text { anchors.centerIn: parent
                         font.pointSize: 48; text: accelerometer.distance}
                }
    
                Label {
                    id: labelDistance
                    anchors.horizontalCenter: circleImage2.horizontalCenter
                    anchors.top: circleImage2.bottom
                    anchors.topMargin: 5
                    anchors { bottom: circleImage2.bottom; horizontalCenter: circleImage2.horizontalCenter }
                    text: "km"
                }
    }
    

    It should look like that:

    http://fs1.directupload.net/images/150818/qiufx8st.png

    But it looks like that:

    http://www.bilder-upload.eu/show.php?file=31e598-1439891706.png

    How can I center all Items to the middle of the screen?

    [edit: Added missing coding tags ``` SGaist]



  • In my humble opinion, you should probably better post this question to the Qt Quick section as it is a question about QML.


  • Lifetime Qt Champion

    Moved, no need to duplicate posts



  • @ubik said:

    It should look like that:

    http://fs1.directupload.net/images/150818/qiufx8st.png

    But it looks like that:

    http://www.bilder-upload.eu/show.php?file=31e598-1439891706.png

    How can I center all Items to the middle of the screen?

    Actually, as the first picture is really schematic, I don't even understand what is the difference between what you want and what you get...

    If you want it to be horizontally centered, it's seems good for me, by the way.
    If you want it to be vertically centered, I don't understand why you didn't just add anchors.verticalCenter after anchors.horizontalCenter in your Grid element :

    Grid {
        id: myGrid
        rows: 4
        columns: 1
        width: parent.width
        height: partent.height
        spacing: 50
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        ...

Log in to reply
 

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