How to generically refer to prev/next sibling elements?

Question

For instance, if I wish to anchor to the parent element, regardless of what its id is, I can write anchors.top: parent.bottom. But what if I wish to anchor to the previous sibling, or next sibling? Can that only be done by id, or is there a way to say it generically?

score 4 · Accepted Answer · answered Sep 04 '14 at 21:59

Here we arrive!!

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

Very nicely constructed, applause. – temporary_user_name Sep 04 '14 at 23:34 — temporary_user_name, Sep 04 '14 at 23:34
@Aerovistae Thanks, was a pleasure hacking this :) – mlvljr Sep 04 '14 at 23:52 — mlvljr, Sep 04 '14 at 23:52

score 3 · Answer 2 · answered Sep 16 '14 at 15:15

Here is my code to handle this case. I generally put it in top-level .qml file or even in a shared JavaScript module so that I can use it everywhere without copy-and-paste :

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 call simply any of these 3 methods...

The only "downside" is that one must provide the parent in arguments...

score 2 · Answer 3 · answered Sep 04 '14 at 04:58

2

Currently it is not possible to access previous and next siblings of an item. You can see a suggestion reported here which is unresolved.

answered Sep 04 '14 at 04:58

Nejat

31,784
12
106
138

score 2 · Answer 4 · answered Sep 04 '14 at 06:42

2

Instead of anchoring to sibling Item you can try position Items in Layouts

answered Sep 04 '14 at 06:42

nib

700
8
15

How to generically refer to prev/next sibling elements?

4 Answers4