Лэйаут фильтров

Filters.qml

import QtQuick 2.3

// @TODO (salnikov): добавить минимальные отступы клеткам

Rectangle {
    width: 200
    height: 600

    property real maxWidth: 200
    property real maxWidthHalf: maxWidth / 2
    property var m: ["винная карта йохохо байда длинная", "вип", "спелый абрикос", "настольные игры", "стол", "столовый прибор", "туалет", "скатерть", "торт", "лошадь", "абрикос"]

    Repeater {
        id: repeater
        model: m
        delegate: Rectangle {
            property string t: modelData
            property alias text: text
            width: text.width
            height: 50
            // TODO (salnikov): убрать отсюда, перенести также в onCompleted
            anchors.top: repeater.itemAt(index-1) ? repeater.itemAt(index-1).bottom : parent.top
            anchors.left: {
                parent.left;
            }
            color: 'gray'
            border.width: 1
            border.color: 'white'

            // Плавное появление на случай долгой обработки списка
            opacity: 0
            visible: !!opacity

            Behavior on opacity {
                NumberAnimation { duration: 200 }
            }

            Text {
                id: text
                text: modelData
                anchors.centerIn: parent
            }
        }
        Component.onCompleted: {
            for (var i = 0; i < m.length; i++) {
                var element = itemAt(i);
                var nextElement = itemAt(i + 1);
                var sum = (element ? element.width : 0) + (nextElement ? nextElement.width : 0);

                if (sum <= maxWidth && nextElement) {
                    // Если оба слова короткие, то отводим им по половине места.
                    // Если одно слово длинее, чем половина, то выделяем каждому по потребностям.
                    if (element.width > maxWidthHalf || nextElement.width > maxWidthHalf) {
                        var half = (maxWidth - sum) / 2;
                        element.width += half;
                        nextElement.width += half;
                    } else {
                        element.width = maxWidthHalf;
                        nextElement.width = maxWidthHalf;
                    }

                    nextElement.anchors.left = element.right;
                    nextElement.anchors.top = element.top;
                    i++;

                    element.opacity = 1;
                    nextElement.opacity = 1;
                } else {
                    element.width = maxWidth;
                    element.text.elide = Text.ElideRight;
                    element.text.width = maxWidth;

                    element.opacity = 1;
                }
            }

        }
    }
}