更改模型后未正确绘制QML中继器

你为什么要计算 blockHeight blockWidth ColumnLayout ?

使用 Layout.fillWidth 和 Layout.fillHeight 属性来表示 列布局 列布局 它将完成你试图自行编程的计算。

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.3

Window {
    id: wndId
    property int wndWidth: 200
    property int wndHeight: 300

    visible: true
    width: wndWidth
    height: wndHeight
    title: qsTr("Testing ColumnLayout")

    Rectangle {
        id: rectId

        property int borderWidth: 5  // width of the blue frame surrounding the window
        property int blockCount: 4   // number of blocks to be drawn using Repeater
        property int blocksSpace: 8  // minimum space between the blocks

        width: wndId.wndWidth
        height: wndId.wndHeight
        border.color: "blue"
        border.width: borderWidth

        Component.onCompleted: print("Outter Rectangle w=" + rectId.width + " h=" + rectId.height)

        // draw blocks on top of each other with some space between them
        ColumnLayout {
            spacing: rectId.blocksSpace
            Layout.alignment: Qt.AlignBottom

            anchors.fill: parent
            anchors.margins: rectId.borderWidth * 2

            Repeater {
                id: repId
                model: rectId.blockCount

                // each block size is calculated dinamically
                Rectangle {
                    id: blockId
                    color: "brown"
                    Layout.fillWidth: true
                    Layout.fillHeight: true

                    // Debug:
                    Component.onCompleted: {
                        print("Inner Rectangle", index)
                        print("  blockCount=" + rectId.blockCount);
                        print("  blockId.width=" + blockId.width + " blockId.height=" + blockId.height)
                        print("  blockWidth=" + rectId.blockWidth + " blockHeight=" + rectId.blockHeight)
                    }

                    Component.onDestruction: print("~Inner Rectangle")

                } // inner Rectangle

                Component.onCompleted: print("Repeater")
                Component.onDestruction: print("~Repeater")
            } // Repeater

        } // ColumnLayout

        MouseArea {
            anchors.fill: parent
            onClicked: {
                print("Mouse clicked!");

                // and finally we change the number of blocks, forcing the Repeater to redraw the model correctly
                rectId.blockCount = 2;
                print("blockHeight= " + rectId.blockHeight);
            }
        }

    } // outter Rectangle

} // Window

为了保存 方块高度

如果你坚持保持计算,因为在现实世界中它更难(足够公平),我建议使用 implicitHeight 和 implicitWidth 。这是因为布局引擎不会触发宽度/高度的更改,因为它应该自己设置这些值,但它会监视隐式大小:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.3

Window {
    id: wndId
    property int wndWidth: 200
    property int wndHeight: 300

    visible: true
    width: wndWidth
    height: wndHeight
    title: qsTr("Testing ColumnLayout")

    Rectangle {
        id: rectId

        property int borderWidth: 5  // width of the blue frame surrounding the window
        property int blockCount: 4   // number of blocks to be drawn using Repeater
        property int blocksSpace: 8  // minimum space between the blocks

        width: wndId.wndWidth
        height: wndId.wndHeight
        border.color: "blue"
        border.width: borderWidth

        // size of each inner rectangle is computed dinamically: changing blockCount should update blockHeight
        property int blockWidth: rectId.width - (rectId.borderWidth * 4)
        property int blockHeight: updateBlockHeight()

        function updateBlockHeight(numBlocks)
        {
            var newHeight = (rectId.height - ((rectId.borderWidth + rectId.blocksSpace)*2) - (rectId.blocksSpace * (rectId.blockCount-1))) / rectId.blockCount;
            print("updateBlockHeight: newHeight=", newHeight);
            return newHeight;
        }

        Component.onCompleted: print("Outter Rectangle w=" + rectId.width + " h=" + rectId.height)

        // draw blocks on top of each other with some space between them
        ColumnLayout {
            spacing: rectId.blocksSpace
            Layout.alignment: Qt.AlignBottom
            anchors.fill: parent
            anchors.margins: rectId.borderWidth * 2

            Repeater {
                id: repId
                model: rectId.blockCount

                // each block size is calculated dinamically
                Rectangle {
                    id: blockId
                    color: "brown"
                    implicitWidth: rectId.blockWidth
                    implicitHeight: rectId.blockHeight
                    onXChanged: print("x[",index,"]=", x)
                    onYChanged: print("y[",index,"]=", y)

                    // Debug:
                    Component.onCompleted: {
                        print("Inner Rectangle", index)
                        print("  blockCount=" + rectId.blockCount);
                        print("  blockId.width=" + blockId.width + " blockId.height=" + blockId.height)
                        print("  blockWidth=" + rectId.blockWidth + " blockHeight=" + rectId.blockHeight)
                    }

                    Component.onDestruction: print("~Inner Rectangle")

                } // inner Rectangle

                Component.onCompleted: print("Repeater")
                Component.onDestruction: print("~Repeater")
            } // Repeater

        } // ColumnLayout

        MouseArea {
            anchors.fill: parent
            onClicked: {
                print("Mouse clicked!");

                // and finally we change the number of blocks, forcing the Repeater to redraw the model correctly
                rectId.blockCount = 2;
                print("blockHeight= " + rectId.blockHeight);
            }
        }

    } // outter Rectangle

} // Window

updateBlockHeight

_{(来自我的评论)}

在Linux上使用Qt 5.15.1可以获得预期的输出。使用Qt 5.15,获取您指示的输出,以确定Qt 5.15.1中可能已修复的错误。