How do you generally refer to the previous / next elements of a brother?

For example, if I want to bind to a parent element regardless of its ID, I can write anchors.top: parent.bottom

. But what if I want to bond with a previous brother or another brother? Can this be done by id alone, or is there a way to say this in general?

+3


source to share


4 answers


Here we come !!

import QtQuick 2.0

Rectangle {
    width: 800; height: 400

    //if item is not parented, -1 is returned
    function itemIndex(item) {
        if (item.parent == null)
            return -1
        var siblings = item.parent.children
        for (var i = 0; i < siblings.length; i++)
            if (siblings[i] == item)
                return i
        return -1 //will never happen
    }
    //returns null, if the item is not parented, or is the first one
    function previousItem(item) {
        if (item.parent == null)
            return null
        var index = itemIndex(item)
        return (index > 0)? item.parent.children[itemIndex(item) - 1]: null
    }
    //returns null, if item is not parented, or is the last one
    function nextItem(item) {
        if (item.parent == null)
            return null

        var index = itemIndex(item)
        var siblings = item.parent.children

        return (index < siblings.length - 1)? siblings[index + 1]: null
    }

    Rectangle {
        width: 200; height: 200
        color: "red"
    }
    Rectangle {
        id: green
        width: 200; height: 200
        color: "green"

        property Item previous: previousItem(green)
        anchors.left: (previous != null)? previous.right: undefined

        property Item next: nextItem(green)
        anchors.right: (next != null)? next.left: undefined
    }
    Rectangle {
        width: 200; height: 200
        anchors.right: parent.right
        color: "blue"
    }
}

      



enter image description here

+3


source


Here is my code to handle this case. I usually put it in a top-level file, .qml

or even a common JavaScript module, so that I can use it everywhere without copying and pasting:

function indexOfChild (item, child) {
    var ret = -1;
    if (item && child && "children" in item) {
        for (var idx = 0; ret < 0 && idx < item.children.length; idx++) {
            if (item.children [idx] === child) {
                ret = idx;
            }
        }
    }
    return ret;
}

function prevSibling (item, child) {
    return (item.children [indexOfChild (item, child) -1] || null);
}

function nextSibling (item, child) {
    return (item.children [indexOfChild (item, child) +1] || null);
}

      



And then I can just call any of these 3 methods ...

The only "drawback" is that you need to provide a parent in the arguments ...

+3


source


It is currently not possible to access previous and next siblings. You can see a suggestion here that is not allowed.

+2


source


Instead of binding to the Item sibling, you can try to place items in Layouts

+2


source







All Articles