Hide first or last item in PathView

Question

I wrote a simple carousel in QML. I run Qt 6.2.0 under Ubuntu 20.04.

import QtQuick

PathView {
    id: view

    property int item_width: 864
    property int item_gap: 250

    anchors.fill: parent
    anchors.bottomMargin: 150
    anchors.topMargin: 50
    pathItemCount: 3
    preferredHighlightBegin: 0.5
    preferredHighlightEnd: 0.5
    highlightRangeMode: PathView.StrictlyEnforceRange
    highlightMoveDuration: 1000
    snapMode: PathView.SnapToItem
    rotation: -90

    model: modelContent
    delegate: DelegateContent { }

    path: Path {
        startX: -item_gap; startY: view.height / 2
        PathAttribute { name: "iconScale"; value: 0.7 }
        PathAttribute { name: "iconOpacity"; value: 0.1 }
        PathAttribute { name: "iconOrder"; value: 0 }
        PathLine {x: view.width / 2; y: view.height / 2; }
        PathAttribute { name: "iconScale"; value: 1 }
        PathAttribute { name: "iconOpacity"; value: 1 }
        PathAttribute { name: "iconOrder"; value: 9 }
        PathLine {x: view.width + item_gap; y: view.height / 2; }
    }

    Component.onCompleted: {
        gesture.gestureFired.connect(gestureFired)
    }

    onCurrentIndexChanged: {
        itemAtIndex(0).visible = currentIndex < (count - 1)
    }

    function gestureFired(type) {
        switch (type) {
        case 1:
            if (view.currentIndex > 0) view.decrementCurrentIndex();
            break;

        case 2:
            if (view.currentIndex < view.count - 1) view.incrementCurrentIndex();
            break;
        }
    }
}

It works very well. The change of the current index is done programmatically only (gestureFired signal from C++). As you can see there is no circular behavior.

Hence, I want to hide the first item (when the last one is selected) or the last item (when the first is selected).

I tried with the code above:

onCurrentIndexChanged: {
    itemAtIndex(0).visible = currentIndex < (count - 1)
}

The idea is: if the currentIndex is the last element ( = count - 1) the visible property of the first item should be false.

But it does not work:

TypeError: Value is null and could not be converted to an object

Which "Value" is it talking about? I debugged the currentIndex and count and they are both valid (4 and 5).

Which is the correct way to achieve such a behavior?

Answer 1

A simple solution is to do the binding in the delegate:

import QtQuick

Column {
    id: root

    required property int index

    // mapping model roles
    required property string name

    visible: _internals.calculateVisibility()

    QtObject {
        id: _internals

        function calculateVisibility() {
            console.log(index, root.PathView.isCurrentItem, root.PathView.view.currentIndex)
            if ((root.index === (root.PathView.view.count - 1)) && (root.PathView.view.currentIndex === 0))
                return false;
            else if ((root.index === 0) && (root.PathView.view.currentIndex === (root.PathView.view.count - 1)))
                return false;
            return true;
        }

    }

    Text {
        id: nameText

        text: root.name
        font.pointSize: 16
        color: root.PathView.isCurrentItem ? "red" : "blue"
    }

}