ColumnFlow.qml

Go to the documentation of this file.

// SPDX-FileCopyrightText: 2018 Pier Luigi Fiorini <pierluigi.fiorini@gmail.com>
// SPDX-FileCopyrightText: 2018 Michael Spencer <sonrisesoftware@gmail.com>
// SPDX-License-Identifier: MPL-2.0
 
import QtQuick
 
Item {
    id: columnFlow
    Accessible.ignored: true
 
    property int columnWidth: 100
 
    property int columns: Math.max(0, Math.floor(width / columnWidth))
 
    property alias model: repeater.model
 
    property alias delegate: repeater.delegate
 
    property int contentHeight: 0
 
    readonly property alias repeaterCompleted: __private.repeaterCompleted
 
    height: contentHeight
 
    onColumnsChanged: reEvalColumns()
    onModelChanged: reEvalColumns()
 
    onWidthChanged: updateWidths()
 
    QtObject {
        id: __private
 
        property bool repeaterCompleted: false
    }
 
    function updateWidths() {
        if (repeaterCompleted) {
            var count = 0;
 
            // Add the first <column> elements
            for (var i = 0; count < columns && i < columnFlow.children.length; i++) {
                if (!columnFlow.children[i] || String(columnFlow.children[i]).indexOf("QQuickRepeater") == 0)
                    continue;
 
                columnFlow.children[i].width = width / columns;
                count++;
            }
        }
    }
 
    function reEvalColumns() {
        if (!repeaterCompleted)
            return;
        var i, j;
        var columnHeights = new Array(columns);
        var lastItem = new Array(columns);
        var lastI = -1;
        var count = 0;
 
        // Add the first <column> elements
        for (i = 0; count < columns && i < columnFlow.children.length; i++) {
            if (!columnFlow.children[i] || String(columnFlow.children[i]).indexOf("QQuickRepeater") == 0 || !columnFlow.children[i].visible)
                continue;
 
            lastItem[count] = i;
            columnHeights[count] = columnFlow.children[i].height;
 
            columnFlow.children[i].anchors.top = columnFlow.top;
            columnFlow.children[i].anchors.left = (lastI === -1 ? columnFlow.left : columnFlow.children[lastI].right);
            columnFlow.children[i].anchors.right = undefined;
            columnFlow.children[i].width = columnFlow.width / columns;
 
            lastI = i;
            count++;
        }
 
        // Add the other elements
        for (i = i; i < columnFlow.children.length; i++) {
            var highestHeight = Number.MAX_VALUE;
            var newColumn = 0;
 
            if (!columnFlow.children[i] || !columnFlow.children[i].visible)
                continue;
 
            // find the shortest column
            for (j = 0; j < columns; j++) {
                if (columnHeights[j] < highestHeight) {
                    newColumn = j;
                    highestHeight = columnHeights[j];
                }
            }
 
            // add the element to the shortest column
            columnFlow.children[i].anchors.top = columnFlow.children[lastItem[newColumn]].bottom;
            columnFlow.children[i].anchors.left = columnFlow.children[lastItem[newColumn]].left;
            columnFlow.children[i].anchors.right = columnFlow.children[lastItem[newColumn]].right;
 
            lastItem[newColumn] = i;
            columnHeights[newColumn] += columnFlow.children[i].height;
        }
 
        var cHeight = 0;
        for (i = 0; i < columns; i++) {
            if (!columnHeights[i])
                continue;
            cHeight = Math.max(cHeight, columnHeights[i]);
        }
        contentHeight = cHeight;
 
        updateWidths();
    }
 
    Repeater {
        id: repeater
        model: columnFlow.model
 
        Component.onCompleted: {
            __private.repeaterCompleted = true;
            columnFlow.reEvalColumns();
        }
    }
}