可以 update/refresh 在项目被移除时使用 Flow QML 组件吗？

Question

我有一个 Flow 布局，我在其中根据用户操作动态添加项目。我以同样的方式删除了用户操作中的这些项目。在删除项目之前，Flow QML 组件似乎按预期工作。该项目本身已被删除，但它占用的 space 只是空白。我的直觉告诉我图形项目本身被删除了，但是当项目被删除时视图没有更新。

子项的动态删除是否在流程组件的范围之外？是否有任何其他行为相同的布局？ GridLayout 似乎是最接近的，但它不会在调整布局大小时自动包裹子项。

有没有什么非破解的方法可以让 Flow 在子项目被禁用时重新排列？如果不是，并且如果 GridLayout 是我最好的选择，如何让它像 Flow 那样包装它的子项？

下面的代码演示了我想要实现的目标：

Item {
    id: root

    Flow {
        id: layout
        anchors.fill: parent

        Loader { id: loader }
    }

    MouseArea {
        anchors.top: parent.top
        height: parent.height / 2
        width: parent.width
        onClicked: loader.source = "SomeQmlComponent.qml"
    }

    MouseArea {
        anchors.bottom: parent.bottom
        height: parent.height / 2
        width: parent.width
        onClicked: loader.source = ""
    }
}

Answer 1

不要在 Flow 中使用 Loader。在您的情况下，项目是 Loader 而不是 Flow 的父级，因此您将失去所有优势。以正常方式添加和删除项目w/o 问题：

import QtQuick 2.7
import QtQuick.Window 2.2

Window {
    width: 600
    height: 600
    visible: true

    Component {
        id: element
        Rectangle {
            width: Math.round(Math.random() * 100) + 50
            height: Math.round(Math.random() * 100) + 50
            color: Qt.rgba(Math.random(),Math.random(),Math.random(),1)
        }
    }

    Flow {
        id: flow
        spacing: 2
        anchors.fill: parent
        add: Transition {
            NumberAnimation { properties: "x,y"; easing.type: Easing.OutBack }
        }
        move: add
    }

    Timer {
        id: timer
        property bool is_add: true
        interval: 300
        repeat: true
        running: true
        onTriggered: {
            if(timer.is_add) {
                element.createObject(flow);
                if(flow.children.length > 20) {
                    timer.is_add = false;
                }
            } else {
                var item = flow.children[0];
                item.destroy();
                if(flow.children.length <= 1) {
                    timer.is_add = true;
                }
            }
        }
    }
}

Answer 2

@folibis - 感谢您的回答，它帮助我解决了一个我试图解决的问题，该问题是动态添加元素并让它们调整到屏幕大小。我以你的例子为例，让矩形填充宽度，高度由矩形填充，高度均匀。所以 shrink/expand 与矩形的数量。为了简单起见，我将它减少为 4 个矩形，并让它随机删除一个矩形。

      Component {
            id: element
            Rectangle {
                width: flow.width
                height: flow.height/flow.children.length
                color: Qt.rgba(Math.random(),Math.random(),Math.random(),1)
            }
        }

        Flow {
            id: flow
            spacing: 2
            anchors.fill: parent
            add: Transition {
                NumberAnimation { properties: "x,y"; easing.type: Easing.OutBack }
            }
            move: add
        }

        Timer {
            id: timer
            property bool is_add: true
            interval: 1000
            repeat: true
            running: true
            onTriggered: {
                if(timer.is_add) {
                    element.createObject(flow);
                    if(flow.children.length > 3) {
                        timer.is_add = false;
                    }
                } else {
                    var i = Math.floor(Math.random() * Math.floor(flow.children.length ));
                    console.log(i)
                    var item = flow.children[i];
                    item.destroy();
                    if(flow.children.length <= 1) {
                        timer.is_add = true;
                    }
                }
            }
        }

可以 update/refresh 在项目被移除时使用 Flow QML 组件吗？

Possible to update/refresh Flow QML component when item has been removed?

layout

qt

qml

qtquickcontrols2