Qt QML矩形内文本无法自动换行问题求助

问题核心 #

你遇到的问题根源是Text 元素未被限制宽度范围——anchors.centerIn: parent仅实现居中布局，但不会约束文本的宽度边界，导致设置的wrapMode没有生效条件，文本会无限制延伸超出父矩形。

解决方法 #

• 移除anchors.centerIn: parent，改用anchors.fill: parent让 Text 填充父矩形的可用空间（可搭配anchors.margins避免文本贴边）
• 保留或明确设置wrapMode（推荐Text.WordWrap保证单词完整性，按需选择Text.WrapAnywhere）
• 通过horizontalAlignment和verticalAlignment实现文本在父元素内的居中对齐，替代anchors.centerIn的效果

修改后的代码片段 #

var elem = '
    import QtQuick 2.15
    import QtQuick.Controls 2.15
    import QtQuick.Layouts 1.15

    RowLayout {
        id: rowlayout
        //anchors.fill: parent
        Layout.minimumHeight: 100
        Layout.preferredHeight: 100
        Layout.maximumHeight: 100
        spacing: 6
        Rectangle {
            id: element_one_rect
            color: "'+active+'"
            Layout.fillWidth: true
            Layout.minimumWidth: root.width * 0.25
            Layout.preferredWidth: root.width * 0.25
            Layout.maximumWidth: root.width * 0.25
            Layout.minimumHeight: 100
            Layout.margins: 10
            Text {
                anchors.fill: parent
                anchors.margins: 10
                text: "'+description+'"
                color: "'+color+'"
                font.weight: Font.DemiBold
                wrapMode: Text.WordWrap
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
            }
        }
        Rectangle {
            color: "'+active+'"
            Layout.fillWidth: true
            Layout.minimumWidth: root.width * 0.72
            Layout.preferredWidth: root.width * 0.72
            Layout.preferredHeight: 100
            Layout.margins: 10
            Text {
                anchors.fill: parent
                anchors.margins: 10
                text: "'+data+'"
                color: "'+color+'"
                font.weight: Font.Bold
                wrapMode: Text.WordWrap
                // wrapMode: Text.WrapAnywhere
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
            }
        }
    }';

补充说明 #

如果不需要 Text 完全填充父矩形，也可以直接设置固定宽度约束：

Text {
    width: parent.width - 20 // 减去左右margin总和
    x: parent.width / 2 - width / 2 // 水平居中
    verticalAlignment: Text.AlignVCenter
    // 其他属性...
}

你的代码中父矩形的宽度已通过 Layout 规则固定比例，这部分无需调整。

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