QML高分榜开发GridLayout内部元素宽度无法调整问题求助

问题根因 #

• 自定义GroupBox样式时未设置内边距，内容区域直接贴合边框
• GridLayout未绑定父容器宽度，默认仅根据文本内容自适应宽度，无法适配GroupBox尺寸
• GridLayout列元素未设置宽度分配规则，内容长度超出时直接溢出

修改步骤 #

1. 给GroupBox添加内边距，预留内容和边框的间隙
   在highscore_box属性块中添加内边距配置：

padding: 25 // 可根据需求调整数值，也可单独设置leftPadding/topPadding等细分属性

2. 给GridLayout绑定宽度，添加行列间距，适配GroupBox内容区域
   修改highscore_grid属性块，同时给每个文本元素添加布局宽度规则：

contentItem: GridLayout {
    id: highscore_grid
    columns: 3
    width: parent.width // 占满GroupBox内容区宽度
    columnSpacing: 15 // 列间距
    rowSpacing: 20 // 行间距

    Text {
        text: "Place";font.bold: true; color: "white";
        font.family: "Super Mario Bros."; font.pixelSize: 30
        Layout.fillWidth: true
        Layout.preferredWidth: 0.2*parent.width // 占总宽度20%
        elide: Text.ElideRight // 内容过长时末尾显示省略号，不需要可删除
    }
    Text {
        text: "Player";font.bold: true; color: "white";
        font.family: "Super Mario Bros."; font.pixelSize: 30
        Layout.fillWidth: true
        Layout.preferredWidth: 0.5*parent.width // 占总宽度50%
        elide: Text.ElideRight
    }
    Text {
        text: "Time";font.bold: true; color: "white";
        font.family: "Super Mario Bros."; font.pixelSize: 30
        Layout.fillWidth: true
        Layout.preferredWidth: 0.3*parent.width // 占总宽度30%
        elide: Text.ElideRight
    }
    Text {
        text: "1st";font.bold: true; color: "white";
        font.family: "Super Mario Bros."; font.pixelSize: 20
        Layout.fillWidth: true
    }
    Text {
        text: "--";font.bold: true; color: "white";
        font.family: "Super Mario Bros."; font.pixelSize: 20
        Layout.fillWidth: true
    }
    Text {
        text: "--";font.bold: true; color: "white";
        font.family: "Super Mario Bros."; font.pixelSize: 20
        Layout.fillWidth: true
    }
}

3. 可选优化：如果需要文本换行而非省略号，把elide: Text.ElideRight替换为wrapMode: Text.WordWrap即可。

完整可运行修改后代码 #

Item {
    id: highscores
    width: 450

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

        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"
            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: parent.width
            columnSpacing: 15
            rowSpacing: 20

            Text {
                text: "Place";font.bold: true; color: "white";
                font.family: "Super Mario Bros."; font.pixelSize: 30
                Layout.fillWidth: true
                Layout.preferredWidth: 0.2*parent.width
                elide: Text.ElideRight
            }
            Text {
                text: "Player";font.bold: true; color: "white";
                font.family: "Super Mario Bros."; font.pixelSize: 30
                Layout.fillWidth: true
                Layout.preferredWidth: 0.5*parent.width
                elide: Text.ElideRight
            }
            Text {
                text: "Time";font.bold: true; color: "white";
                font.family: "Super Mario Bros."; font.pixelSize: 30
                Layout.fillWidth: true
                Layout.preferredWidth: 0.3*parent.width
                elide: Text.ElideRight
            }
            Text {
                text: "1st";font.bold: true; color: "white";
                font.family: "Super Mario Bros."; font.pixelSize: 20
                Layout.fillWidth: true
            }
            Text {
                text: "--";font.bold: true; color: "white";
                font.family: "Super Mario Bros."; font.pixelSize: 20
                Layout.fillWidth: true
            }
            Text {
                text: "--";font.bold: true; color: "white";
                font.family: "Super Mario Bros."; font.pixelSize: 20
                Layout.fillWidth: true
            }
        }
    }
}

内容的提问来源于stack exchange，提问作者sjokkopudd