Change width of items inside GridLayout-CodePudding

I am designing a simple high score in qml. I have decided to use a GridLayout inside a GroupBox for displaying some text. I dont know why, but I cannot change the width of the text. I have tried margins, but they also dont work. Right now the text crashes into the border of the GroupBox. (I want the GroupBox inside the Item because I'm going to add other things in it like a button later.)

Item {
    id: highscores
    width: 450

    GroupBox {
        id: highscore_box
        title: qsTr("GroupBox")
        anchors.centerIn: parent
        width: parent.width
        height: 450

        background: Rectangle {
            y: highscore_box.topPadding - highscore_box.padding
            width: parent.width
            height: parent.height - highscore_box.topPadding   highscore_box.padding
            color: "transparent"
            border.color: "white"
            border.width: 5
            radius: 10
        }

        label: Rectangle {
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.bottom: parent.top
            anchors.bottomMargin: -height/2
            color: "white"                  //set this to the background color
            width: parent.width * 0.6
            height: box_title.font.pixelSize
            Text {
                id: box_title
                text: qsTr("High Scores")
                anchors.centerIn: parent
                font.pixelSize: 32
                font.family: "Super Mario Bros."
            }
        }

        contentItem: GridLayout {
            id: highscore_grid
            columns: 3
            //width: ?????

            Text {text: "Place";font.bold: true; color: "white";
                font.family: "Super Mario Bros."; font.pixelSize: 30}
            Text {text: "Player";font.bold: true; color: "white";
                font.family: "Super Mario Bros."; font.pixelSize: 30}
            Text {text: "Time";font.bold: true; color: "white";
                font.family: "Super Mario Bros."; font.pixelSize: 30}
            Text {text: "1st";font.bold: true; color: "white";
                font.family: "Super Mario Bros."; font.pixelSize: 20}
            Text {text: "--";font.bold: true; color: "white";
                font.family: "Super Mario Bros."; font.pixelSize: 20}
            Text {text: "--";font.bold: true; color: "white";
                font.family: "Super Mario Bros."; font.pixelSize: 20}
        }
    }
}

CodePudding user response：

When working with layouts, you can't use the standard anchor calls. You will instead need to

In addition, when you declare a layout, you need to specify what space it will occupy. You could use something like

anchors.fill: parent

Afterwards, you may need to also specify the space the objects inside of the gridlayout will take up. Yet again, don't use standard width/len calls but the Layout.XXXX calls.

Layouts are great for building fluid and dynamic screens, but they can be little rascals sometimes. Nesting Layouts is extremely beneficial. I personally use many-many layers deep layouts. Gl!

I would recomend creating a 'practice' QML file wherein you create a gridlayout with many objects inside of it. Rectangles/buttons/more layouts. Get comfy with it. Once you have more understanding of layouts, then try and apply it to your existing problem which involves MVC.