Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

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?



  • anchors.verticalCenter: parent.verticalCenter? Or anchors.centerIn: parent?



  • @xargs1

    Where to put it? When i put

    anchors.verticalCenter: parent.verticalCenter

    in Grid, then i get this:

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



  • What is the height of the parent? If the parent's height is greater than the screen size, verticalCenter won't work.



  • The height of the parent isn't set.

    Well, when I put "anchors.verticalCenter: parent.verticalCenter" in the grid, it does center vertically the first image. But the other elements are just moving down under the first image.



  • I don't think you can center in something that doesn't have a height.



  • @xargs1

    So, how to set width and height with the screen size?



  • You can reference Screen.width and Screen.height.


Log in to reply