更改 GridLayout 中项目的宽度

Question

我正在用qml设计一个简单的高分。我决定在 GroupBox 中使用 GridLayout 来显示一些文本。我不知道为什么，但我无法更改文本的宽度。我试过边距，但它们也不起作用。现在，文本会撞到 GroupBox 的边框中。（我想要 Item 中的 GroupBox，因为稍后我将在其中添加其他东西，例如按钮。）

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

Answer 1

使用布局时，您不能使用标准锚点调用。您将需要 use these following calls 来操纵您的网格布局。

此外，声明布局时，需要指定space它将占据什么。你可以使用像

这样的东西

anchors.fill: parent

之后，您可能还需要指定 space 网格布局内的对象将占用。再说一遍，不要使用标准 width/len 调用，而是使用 Layout.XXXX 调用。

布局对于构建流畅和动态的屏幕非常有用，但有时它们可能会有点儿无赖。 Nesting Layouts is extremely beneficial。我个人使用很多层深度布局。 GL!

我建议创建一个 'practice' QML 文件，您可以在其中创建一个包含许多对象的网格布局。 Rectangles/buttons/more 布局。适应它。一旦你对布局有了更多的了解，然后尝试将它应用到你现有的涉及 MVC 的问题。

更改 GridLayout 中项目的宽度

Change width of items inside GridLayout

qt

qml