删除项目后是否可以更新/刷新 Flow QML 组件？答案

【问题标题】：Possible to update/refresh Flow QML component when item has been removed?删除项目后是否可以更新/刷新 Flow QML 组件？
【发布时间】：2017-06-09 17:43:31
【问题描述】：

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

子项的动态删除是否超出了流组件的范围？是否还有其他表现相同的布局？ 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 = ""
    }
}

【问题讨论】：

如何删除该项目？请提供您的代码...
@folibis：我目前使用加载器并对其源属性进行操作。我知道不应该删除已使用加载器实例化的组件，但我认为这不是这里的问题。

标签： qt layout qml qtquickcontrols2

【解决方案1】：

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

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;
                }
            }
        }
    }
}

【讨论】：

有什么方法可以在开头插入项目而不是在结尾稍作修改？似乎 createObject() 没有提供这样的选项。
有可能。由于 Item.children 只是一个项目数组 - list<Item> 您可以根据需要构建列表，因此将此数组重新分配给 Item.children
但是我必须先分配它，如您的示例所示，然后重新排列？这可能会破坏动画？
您的建议很有效，不会影响动画。

【解决方案2】：

@folibis - 感谢您的回答，它帮助我解决了我试图解决的问题，即动态添加元素并让它们调整到屏幕大小。我举了你的例子，让矩形填充宽度，高度由矩形填充，它们的高度是均匀的。所以随着矩形的数量收缩/扩展。为简单起见，我将其缩减为 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;
                    }
                }
            }
        }

【讨论】：