Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Repeater support #1

Open
c01nd01r opened this issue May 28, 2020 · 0 comments
Open

Repeater support #1

c01nd01r opened this issue May 28, 2020 · 0 comments

Comments

@c01nd01r
Copy link

c01nd01r commented May 28, 2020

Hi!
Firstly, thanks for the component! I tried it, works great.

But I got a problem with the Repeater component.
It seems the alignment is not calculated correctly.

Without Repeater component:

Снимок экрана 2020-05-28 в 14 26 07

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Window 2.12

ApplicationWindow {
    visible: true
    width: 400; height: 100

    Flex {
        width: parent.width
        height: parent.height
        justifyContent: "spaceBetween"
        alignItems: "center"
        
        Button {
            text: "0"
        }

        Button {
            text: "1"
        }

        Button {
            text: "2"
        }
    }
}
With Repeater component:

Снимок экрана 2020-05-28 в 14 31 24

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Window 2.12

ApplicationWindow {
    visible: true
    width: 400; height: 100

    Flex {
        width: parent.width
        height: parent.height
        justifyContent: "spaceBetween"
        alignItems: "center"

        Repeater {
            model: 3

            Button {
                text: index
            }
        }
    }
}

I tried a little bit to debug Flex.qml component.
I added console.log(child) in this place:

child = flex.children[i];

and get output:

qml: Button_QMLTYPE_1(0x7fe2174a7e60)
qml: Button_QMLTYPE_1(0x7fe217614cb0)
qml: Button_QMLTYPE_1(0x7fe217568cd0)
qml: QQuickRepeater(0x7fe2177b07d0)

In next step, I added break for instance of Repeater component and now it's render correctly.

Full code of updatePositions()

function updatePositions() {
    if (flex.height != 0 && flex.width != 0) {
        var rootNode = backend.createNode();
        processNode(flex, rootNode);
        var nodes = []
        var node = {}
        var child = {}
        var i = 0;
        for (i = 0; i !== flex.children.length; i++) {
            child = flex.children[i];

            // remove Repeater components from future layout calculation
            if (child instanceof Repeater) break;

            node = backend.createNode();
            if (isFlex(child)) {
                processNode(child, node);
            } else {
                setDefaultNodeProps(child, node);
            }
            nodes.push(node);
        }
        rootNode.appendChildren(nodes);
        rootNode.calculateLayoutLtr(flex.width, flex.height);
        for (i = 0; i !== flex.children.length; i++) {
            node = nodes[i];
            if (!node) break;
            flex.children[i].x = node.getLayoutLeft();
            flex.children[i].y = node.getLayoutTop();
            flex.children[i].width = node.getLayoutWidth();
            flex.children[i].height = node.getLayoutHeight();
        }
        backend.collectGarbage(rootNode);
        return true;
    } else {
        return false;
    }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant