QML Pane组件内如何正确放置Rectangle 解决锚定失效问题

• 一旦元素成为Layout类组件的直接子项，Layout将拥有该元素位置、尺寸的最高优先级控制权，会自动覆盖子项手写的anchors绑定、手动设置的x/y坐标。代码中的Flickable、蓝色Rectangle虽然被手动设置了parent: rect，但它们的逻辑对象树依旧挂载在RowLayout下，RowLayout每次重新计算布局时，都会直接重写两个元素的坐标，完全冲掉手动编写的anchors对齐规则。
• 手动修改子元素的parent属于绕过对象树的视觉层调整，和Layout的布局逻辑天然冲突：原本编写的anchors.right: rect.right对齐规则，和RowLayout的位置计算逻辑分属两个独立的控制链路，最终必然出现锚定不生效的问题。
• 代码中写在Pane上的Layout.fillWidth: true属于无效属性：这类Layout专属的附加属性只有绑定在Layout的直接子项上才会生效，直接挂在Pane本身没有任何作用。

完全不需要手动编写anchors，顺着RowLayout的布局逻辑调整即可，修改步骤如下：

1. 删掉Flickable、蓝色Rectangle上所有手动编写的parent: rect、anchors绑定代码，避免和RowLayout的控制权冲突
2. 给两个子元素补充对应的Layout附加属性，让RowLayout自动完成位置排布：
   • 给Flickable设置Layout.fillWidth: true、Layout.fillHeight: true，让它自动占据RowLayout内除右侧按钮外的全部剩余空间
   • 给蓝色Rectangle设置Layout.alignment: Qt.AlignRight | Qt.AlignVCenter、Layout.margins: 2，让它自动对齐到RowLayout的右侧、垂直居中位置，预留2px边距
3. 删掉Pane上无效的Layout.fillWidth: true属性

修改后的RowLayout核心代码示例：

RowLayout
{
    width: parent.width; height: 50

    Flickable
    {
        Layout.fillWidth: true
        Layout.fillHeight: true

        TextArea.flickable:
            TextArea
            {
                id: messageField
                text: "TextArea"
                wrapMode: TextArea.Wrap
            }

        ScrollBar.vertical: ScrollBar { }
    }

    Rectangle
    {
        id: sendButton
        Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
        Layout.margins: 2
        height: 20; width: 20
        color: "blue"
    }
}

补充说明：如果确实需要不依赖Layout、直接用anchors实现右侧对齐，只需要把两个元素从RowLayout里移出来，直接作为Pane的子元素，不要套RowLayout容器，这时候再编写anchors绑定就会正常生效。本质上只要元素是Layout的直接子项，就不要混用anchors布局，两类布局规则同时使用必然出现控制权冲突。

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