Qt QML GridLayout单元格文本对齐异常及解决方法问询

你的核心问题是混淆了Layout.alignment的作用范围，以及未正确设置Text元素的对齐规则：

• Layout.alignment用于控制当前项目在GridLayout单元格内的对齐，但你给每个Rectangle设置了Layout.fillWidth: true和Layout.fillHeight: true，这会让Rectangle完全填满单元格，此时Layout.alignment的对齐设置会被覆盖——没有多余空间用来调整位置。
• 内部的Text元素默认是左对齐、顶部对齐，你未给它设置任何对齐规则，所以会保持默认状态。

正确实现代码 #

以下是修正后的代码，可实现你预期的「所有文本垂直居中，LEFT左对齐、CENTER居中对齐、RIGHT右对齐」效果：

import QtQuick 2.15
import QtQuick.Layouts

Window {
    id: rootWindow
    visible: true
    height: 400
    width: 640

    Rectangle {
        id: headerBackground
        anchors.fill: parent
        color: "orange"

        GridLayout {
            anchors.fill: parent
            anchors.margins: 2
            columns: 3
            rows: 1
            columnSpacing: 0
            rowSpacing: 0

            // 左对齐列
            Rectangle {
                Layout.fillHeight: true
                Layout.fillWidth: true
                color: "blue"

                Text {
                    color: "white"
                    font.family: "Inter"
                    font.pointSize: 14
                    font.bold: true
                    text: "LEFT"
                    // 文本在父元素内左对齐+垂直居中
                    anchors.left: parent.left
                    anchors.verticalCenter: parent.verticalCenter
                    // 可选：给左边留边距避免贴边
                    anchors.leftMargin: 8
                }
            }

            // 居中对齐列
            Rectangle {
                Layout.fillHeight: true
                Layout.fillWidth: true
                color: "red"

                Text {
                    color: "white"
                    font.family: "Inter"
                    font.pointSize: 14
                    font.bold: true
                    text: "CENTER"
                    // 文本在父元素内完全居中
                    anchors.centerIn: parent
                }
            }

            // 右对齐列
            Rectangle {
                Layout.fillHeight: true
                Layout.fillWidth: true
                color: "green"

                Text {
                    color: "white"
                    font.family: "Inter"
                    font.pointSize: 14
                    font.bold: true
                    text: "RIGHT"
                    // 文本在父元素内右对齐+垂直居中
                    anchors.right: parent.right
                    anchors.verticalCenter: parent.verticalCenter
                    // 可选：给右边留边距避免贴边
                    anchors.rightMargin: 8
                }
            }
        }
    }
}

另一种实现方式（利用Text的textAlignment） #

如果你不想使用anchors，也可以让Text填满父元素，通过textAlignment直接设置对齐规则：

// 以左对齐列为例，其他列同理
Rectangle {
    Layout.fillHeight: true
    Layout.fillWidth: true
    color: "blue"

    Text {
        anchors.fill: parent
        color: "white"
        font.family: "Inter"
        font.pointSize: 14
        font.bold: true
        text: "LEFT"
        // 水平左对齐+垂直居中
        textAlignment: Qt.AlignLeft | Qt.AlignVCenter
        // 可选：设置内边距
        padding: 8
    }
}

QML Layout与CSS Flex的核心差异 #

• CSS Flex中，align-items/justify-content是控制子元素在容器内的对齐；但QML的Layout.alignment是项目自身在Layout分配的单元格内的对齐，当项目填满单元格时，该属性会失去作用。
• QML中要实现内部元素的对齐，需要直接对内部元素设置anchors、alignment或textAlignment这类属性，与容器的Layout设置是分离的。

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