TabBar.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.Templates as T
import Fluid as MD
import "../internal" as Internal
 
T.TabBar {
    id: control
 
    enum Variant { Primary, Secondary }
    enum LayoutMode { Fixed, Scrollable }
    property int variant: MD.TabBar.Primary
    property int layoutMode: MD.TabBar.Fixed
    property color containerColor: control.MD.Style.surfaceColor
    property color indicatorColor: control.MD.Style.primaryColor
    property color dividerColor: control.MD.Style.outlineVariantColor
 
    property int _focusIndex: -1
    property bool _initialized: false
    property bool _destroying: false
    readonly property bool _scrollable: layoutMode === MD.TabBar.Scrollable
    readonly property int _visibleCount: {
        let result = 0;
        for (let i = 0; i < count; ++i) {
            const item = itemAt(i);
            if (item && item.visible)
                ++result;
        }
        return result;
    }
    readonly property real _naturalWidth: {
        let result = 0;
        for (let i = 0; i < count; ++i) {
            const item = itemAt(i);
            if (item && item.visible)
                result += item.implicitWidth;
        }
        return result + (layoutMode === MD.TabBar.Scrollable && _visibleCount > 0
            ? MD.Tokens.tab.scrollableLeadingOffset : 0);
    }
    readonly property real _naturalHeight: {
        let result = variant === MD.TabBar.Primary ? MD.Tokens.tab.primaryContainerHeight
                                                  : MD.Tokens.tab.secondaryContainerHeight;
        for (let i = 0; i < count; ++i) {
            const item = itemAt(i);
            if (item && item.visible)
                result = Math.max(result, item.implicitHeight);
        }
        return result;
    }
    readonly property real _minimumTabWidth: {
        let result = MD.Tokens.tab.minimumInteractiveSize;
        for (let i = 0; i < count; ++i) {
            const item = itemAt(i) as MD.TabButton;
            if (item && item.visible)
                result = Math.max(result, item._minimumWidth);
        }
        return result;
    }
 
    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
                            _naturalWidth + leftPadding + rightPadding)
    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
                             _naturalHeight + topPadding + bottomPadding)
    padding: 0
    spacing: 0
    focusPolicy: Qt.NoFocus
    wheelEnabled: false
    LayoutMirroring.childrenInherit: true
 
    function _indexOf(item) {
        for (let i = 0; i < count; ++i) {
            if (itemAt(i) === item)
                return i;
        }
        return -1;
    }
    function _available(index) {
        const item = index >= 0 && index < count ? itemAt(index) : null;
        return item !== null && item.visible && item.enabled;
    }
    function _entryIndex() {
        if (_available(currentIndex))
            return currentIndex;
        for (let i = 0; i < count; ++i) {
            if (_available(i))
                return i;
        }
        return -1;
    }
    function _isTabStop(item) {
        const index = _available(_focusIndex) ? _focusIndex : _entryIndex();
        return _indexOf(item) === index;
    }
    function _widthFor(item) {
        if (control._scrollable)
            return item.implicitWidth;
        return _visibleCount > 0 ? Math.max(_minimumTabWidth,
                                           availableWidth / _visibleCount) : 0;
    }
    function _focusEntered(item) {
        _focusIndex = _indexOf(item);
        _reveal(item);
    }
    function _focusedItem() {
        for (let i = 0; i < count; ++i) {
            const item = itemAt(i);
            if (item && item.activeFocus)
                return item;
        }
        return null;
    }
    function _focusLeft() {
        if (control._destroying)
            return;
        if (!_focusedItem())
            _focusIndex = _entryIndex();
    }
    function _focusAt(index) {
        if (!_available(index))
            return;
        _focusIndex = index;
        const item = itemAt(index);
        item.forceActiveFocus(Qt.TabFocusReason);
        _reveal(item);
    }
    function _handleNavigation(event) {
        let delta = 0;
        if (event.key === Qt.Key_Left)
            delta = mirrored ? 1 : -1;
        else if (event.key === Qt.Key_Right)
            delta = mirrored ? -1 : 1;
        else if (event.key === Qt.Key_Home || event.key === Qt.Key_End) {
            const fromEnd = event.key === Qt.Key_End;
            for (let step = 0; step < count; ++step) {
                const index = fromEnd ? count - 1 - step : step;
                if (_available(index)) {
                    _focusAt(index);
                    break;
                }
            }
            event.accepted = true;
            return true;
        } else {
            return false;
        }
        const focused = _focusedItem();
        const start = focused ? _indexOf(focused) : _entryIndex();
        for (let step = 1; step <= count; ++step) {
            const index = ((start + delta * step) % count + count) % count;
            if (_available(index)) {
                _focusAt(index);
                break;
            }
        }
        event.accepted = true;
        return true;
    }
    function _availabilityChanged() {
        if (control._destroying)
            return;
        const focused = _focusedItem();
        if (focused && !_available(_indexOf(focused)))
            _focusAt(_entryIndex());
        else if (!focused)
            _focusIndex = _entryIndex();
        _scheduleReveal();
    }
    function _reveal(item) {
        if (!item || !item.visible || viewport.width <= 0)
            return;
        let bounds = item.mapToItem(viewport, 0, 0);
        const realItem = viewport.itemAt(item.x + item.width / 2, item.y + item.height / 2) === item;
        const contained = item.width <= viewport.width
            ? bounds.x >= 0 && bounds.x + item.width <= viewport.width
            : bounds.x <= 0 && bounds.x + item.width >= viewport.width;
        if (realItem && contained)
            return;
        const index = control._indexOf(item);
        if ((!realItem || !contained) && index >= 0)
            viewport.positionViewAtIndex(index, ListView.Contain);
        bounds = item.mapToItem(viewport, 0, 0);
        let destination = viewport.contentX;
        if (bounds.x < 0)
            destination += bounds.x;
        else if (bounds.x + item.width > viewport.width)
            destination += bounds.x + item.width - viewport.width;
        viewport.contentX = Math.max(viewport._minimumContentX,
                                     Math.min(viewport._maximumContentX, destination));
    }
    function _revealCurrent() {
        const focused = _focusedItem();
        _reveal(focused || currentItem);
    }
    function _revealSelected() {
        _reveal(currentItem);
    }
    function _scheduleSelectedReveal() {
        if (!control._destroying)
            Qt.callLater(control._revealSelected);
    }
    function _scheduleReveal() {
        if (!control._destroying)
            Qt.callLater(control._revealCurrent);
    }
 
    onCountChanged: Qt.callLater(control._availabilityChanged)
    onCurrentIndexChanged: {
        if (!_focusedItem())
            _focusIndex = _entryIndex();
        _scheduleSelectedReveal();
    }
    onCurrentItemChanged: _scheduleSelectedReveal()
    onAvailableWidthChanged: _scheduleReveal()
    onLayoutModeChanged: _scheduleReveal()
    onMirroredChanged: _scheduleReveal()
    Component.onCompleted: {
        _focusIndex = _entryIndex();
        Qt.callLater(function() { control._initialized = true; control._revealCurrent(); });
    }
    Component.onDestruction: control._destroying = true
 
    Keys.priority: Keys.BeforeItem
    Keys.onPressed: event => { control._handleNavigation(event); }
 
    contentItem: ListView {
        id: viewport
        objectName: "tabViewport"
        model: control.contentModel
        orientation: ListView.Horizontal
        currentIndex: -1
        interactive: contentWidth > width
        clip: true
        boundsBehavior: Flickable.StopAtBounds
        boundsMovement: Flickable.StopAtBounds
        flickableDirection: Flickable.HorizontalFlick
        snapMode: ListView.NoSnap
        readonly property real _contentStart: {
            let result = headerItem ? headerItem.x : 0;
            for (let i = 0; i < control.count; ++i) {
                const item = control.itemAt(i);
                if (item && item.visible)
                    result = Math.min(result, item.x);
            }
            return result;
        }
        readonly property real _contentEnd: {
            let result = headerItem ? headerItem.x + headerItem.width : 0;
            for (let i = 0; i < control.count; ++i) {
                const item = control.itemAt(i);
                if (item && item.visible)
                    result = Math.max(result, item.x + item.width);
            }
            return result;
        }
        readonly property real _minimumContentX: control.mirrored
            ? Math.min(_contentStart, _contentEnd - width) : _contentStart
        readonly property real _maximumContentX: control.mirrored
            ? _contentEnd - width : Math.max(_contentStart, _contentEnd - width)
        header: Item {
            width: control.layoutMode === MD.TabBar.Scrollable && control._visibleCount > 0
                ? MD.Tokens.tab.scrollableLeadingOffset : 0
            height: viewport.height
        }
 
        Internal.TabIndicator {
            parent: viewport
            primary: control.variant === MD.TabBar.Primary
            readonly property MD.TabButton selectedTab: control.currentItem as MD.TabButton
            readonly property real selectedWidth: selectedTab && selectedTab.visible
                ? (primary ? selectedTab._primaryIndicatorWidth : selectedTab.width) : 0
            targetWidth: selectedWidth
            targetX: selectedTab ? selectedTab.x - viewport.contentX
                + (selectedTab.width - selectedWidth) / 2 : 0
            y: viewport.height - height
            indicatorColor: control.indicatorColor
            animationEnabled: control._initialized && !viewport.moving
            visible: selectedWidth > 0
            z: 2
        }
    }
 
    background: Rectangle {
        color: control.containerColor
        Rectangle {
            objectName: "tabDivider"
            parent: viewport
            z: 1
            width: viewport.width
            height: MD.Tokens.tab.dividerHeight
            y: viewport.height - height
            color: control.dividerColor
            Accessible.ignored: true
        }
    }
}