0

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

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

2 回答 2

1

不要Loader在里面使用Flow。在您的情况下，项目是父级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;
                }
            }
        }
    }
}
于 2017-01-24T20:23:10.160 回答
0

@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;
                    }
                }
            }
        }
于 2020-12-08T23:03:07.940 回答