AdaptiveGrid.qml

Go to the documentation of this file.

// SPDX-FileCopyrightText: 2026 Pier Luigi Fiorini <pierluigi.fiorini@gmail.com>
// SPDX-License-Identifier: MPL-2.0
 
pragma ComponentBehavior: Bound
 
import QtQuick
import QtQuick.Layouts
import Fluid as MD
 
Item {
    id: control
    Accessible.ignored: true
 
    default property alias contentData: layout.data
 
    property real referenceWidth: width
 
    readonly property int breakpoint: MD.Breakpoints.fromWidth(referenceWidth)
 
    readonly property int columns: MD.Breakpoints.columnCount(breakpoint)
 
    property real margins: MD.Breakpoints.margin(breakpoint)
 
    property real columnSpacing: MD.Breakpoints.gutter(breakpoint)
 
    property real rowSpacing: MD.Tokens.measurement.space0
 
    property alias flow: layout.flow
 
    property alias layoutDirection: layout.layoutDirection
 
    readonly property real contentWidth: Math.max(0, width - 2 * margins)
 
    readonly property real columnWidth: Math.max(0, (contentWidth - (columns - 1) * columnSpacing) / columns)
 
    implicitWidth: layout.implicitWidth + 2 * margins
    implicitHeight: layout.implicitHeight
 
    function columnLeft(index) {
        if (!Number.isInteger(index) || index < 0 || index >= columns)
            return NaN;
 
        const physicalIndex = layoutDirection === Qt.RightToLeft ? columns - index - 1 : index;
        return margins + physicalIndex * (columnWidth + columnSpacing);
    }
 
    function columnRight(index) {
        const left = columnLeft(index);
        return Number.isNaN(left) ? NaN : left + columnWidth;
    }
 
    function spanWidth(span) {
        if (!Number.isInteger(span) || span < 1 || span > columns)
            return NaN;
        return span * columnWidth + (span - 1) * columnSpacing;
    }
 
    GridLayout {
        id: layout
 
        x: control.margins
        width: control.contentWidth
        height: control.height
        columns: control.columns
        columnSpacing: control.columnSpacing
        rowSpacing: control.rowSpacing
        uniformCellWidths: true
    }
}