PySide6+QML中StackView与GridLayout组合的异常问题排查

我用PySide6+QML写了一个小应用，代码如下：

main.py #

import sys
from pathlib import Path
from PySide6.QtGui import QGuiApplication
from PySide6.QtQml import QQmlApplicationEngine


if __name__ == "__main__":
    app = QGuiApplication(sys.argv)
    engine = QQmlApplicationEngine()

    # Get the path of the current directory, and then add the name
    # of the QML file, to load it.
    qml_file = Path(__file__).parent / "view.qml"
    engine.load(qml_file)

    if not engine.rootObjects():
        sys.exit(-1)

    sys.exit(app.exec())

view.qml #

import QtQuick 2.0
import QtQuick.Layouts 1.11
import QtQuick.Controls 2.15
import QtQuick.Window 2.1

ApplicationWindow {
    id: main
    title: qsTr("Hello World")
    width: 640
    height: 480
    visible: true

    header: ToolBar {
        RowLayout {
            anchors.fill: parent
            ToolButton {
                text: qsTr("GridView1")
                onClicked: stack.push(grid_1)
            }
            ToolButton {
                text: qsTr("GridView2")
                onClicked: stack.push(grid_2)
            }
        }
    }

    StackView {
        id: stack
        initialItem: grid_1
        anchors.fill: parent
    }

    Component {
        id: grid_1

        GridLayout {
            id: grid
            columns: 3
            columnSpacing: 0

            Rectangle {
                id: red_1
                width: parent.width/5
                height: parent.height
                color: "red"
                border.color: "black"
                border.width: 5
                radius: 10

                Text {
                    text: grid.width
                    anchors.centerIn: red_1
                }
            }

            Rectangle {
                id: red_2
                width: parent.width*2/5
                height: parent.height/2
                color: "red"
                border.color: "green"
                border.width: 5
                radius: 10

                Text {
                    text: red_2.width
                    anchors.centerIn: red_2
                }
            }

            Rectangle {
                id: red_3
                width: parent.width*2/5
                height: parent.height
                color: "red"
                border.color: "blue"
                border.width: 5
                radius: 10

                Text {
                    text: red_3.width
                    anchors.centerIn: red_3
                }
            }
        }
    }

    Component {
        id: grid_2

        Rectangle {
            width: 100
            height: 100
            color: "green"
            border.color: "black"
            border.width: 5
            radius: 10
        }
    }
}

遇到的问题：

• 应用启动后，red_3矩形堆叠在其他矩形上方，布局不符合预期
• 切换到GridView2再切回后布局恢复正常，但调整窗口大小时，矩形不再响应尺寸变化，必须再次切换视图才会更新

怀疑是InitialItem未正确加载GridLayout，或者push方法破坏了事件处理，请问怎么解决？

问题根源 #

1. 初始布局异常：GridLayout作为StackView的initialItem时，初始尺寸未绑定到StackView，导致布局计算错误，red_3出现堆叠。
2. 尺寸更新失效：每次push都会创建组件新实例，原实例的尺寸绑定关系在切换后无法触发动态更新；同时直接设置width/height而非使用布局管理器的专属属性，导致窗口 resize 时布局无法自动响应。

修复步骤 #

1. 给GridLayout绑定明确尺寸

在grid_1的GridLayout中，直接绑定宽高到StackView，确保初始加载时获取正确的父级尺寸：

Component {
    id: grid_1

    GridLayout {
        id: grid
        columns: 3
        columnSpacing: 0
        width: stack.width
        height: stack.height

        // 子项代码不变
    }
}

2. 使用Layout属性管理子项布局

GridLayout需要通过Layout系列属性控制子项，而非直接设置width/height，这样才能让布局管理器自动处理尺寸变化：
修改grid_1内的三个矩形：

Rectangle {
    id: red_1
    Layout.fillHeight: true
    Layout.preferredWidth: grid.width / 5
    color: "red"
    border.color: "black"
    border.width: 5
    radius: 10

    Text {
        text: grid.width
        anchors.centerIn: parent
    }
}

Rectangle {
    id: red_2
    Layout.preferredWidth: grid.width * 2 / 5
    Layout.preferredHeight: grid.height / 2
    color: "red"
    border.color: "green"
    border.width: 5
    radius: 10

    Text {
        text: red_2.width
        anchors.centerIn: parent
    }
}

Rectangle {
    id: red_3
    Layout.fillHeight: true
    Layout.preferredWidth: grid.width * 2 / 5
    color: "red"
    border.color: "blue"
    border.width: 5
    radius: 10

    Text {
        text: red_3.width
        anchors.centerIn: parent
    }
}

3. 优化StackView切换逻辑

用replace替代push，避免重复创建组件实例，同时防止栈堆积导致的布局异常：
修改ToolButton的点击事件：

ToolButton {
    text: qsTr("GridView1")
    onClicked: stack.replace(grid_1)
}
ToolButton {
    text: qsTr("GridView2")
    onClicked: stack.replace(grid_2)
}

完整修复后的view.qml #

import QtQuick 2.0
import QtQuick.Layouts 1.11
import QtQuick.Controls 2.15
import QtQuick.Window 2.1

ApplicationWindow {
    id: main
    title: qsTr("Hello World")
    width: 640
    height: 480
    visible: true

    header: ToolBar {
        RowLayout {
            anchors.fill: parent
            ToolButton {
                text: qsTr("GridView1")
                onClicked: stack.replace(grid_1)
            }
            ToolButton {
                text: qsTr("GridView2")
                onClicked: stack.replace(grid_2)
            }
        }
    }

    StackView {
        id: stack
        initialItem: grid_1
        anchors.fill: parent
    }

    Component {
        id: grid_1

        GridLayout {
            id: grid
            columns: 3
            columnSpacing: 0
            width: stack.width
            height: stack.height

            Rectangle {
                id: red_1
                Layout.fillHeight: true
                Layout.preferredWidth: grid.width / 5
                color: "red"
                border.color: "black"
                border.width: 5
                radius: 10

                Text {
                    text: grid.width
                    anchors.centerIn: parent
                }
            }

            Rectangle {
                id: red_2
                Layout.preferredWidth: grid.width * 2 / 5
                Layout.preferredHeight: grid.height / 2
                color: "red"
                border.color: "green"
                border.width: 5
                radius: 10

                Text {
                    text: red_2.width
                    anchors.centerIn: parent
                }
            }

            Rectangle {
                id: red_3
                Layout.fillHeight: true
                Layout.preferredWidth: grid.width * 2 / 5
                color: "red"
                border.color: "blue"
                border.width: 5
                radius: 10

                Text {
                    text: red_3.width
                    anchors.centerIn: parent
                }
            }
        }
    }

    Component {
        id: grid_2

        Rectangle {
            width: 100
            height: 100
            color: "green"
            border.color: "black"
            border.width: 5
            radius: 10
            anchors.centerIn: parent
        }
    }
}

说明 #

• Layout属性让GridLayout自动管理子项布局和尺寸更新，解决窗口 resize 无响应问题
• 绑定GridLayout宽高到StackView，确保初始加载时布局计算正确
• replace替代push，避免重复创建组件实例，保证切换后布局动态更新正常

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