Unexpected behavior using Repeater QML type
Unsolved
QML and Qt Quick
-
In trying to reproduce the examples provided in MacOS dock-like component in QML, I encountered some strange behavior for the 2 examples presented, namely they work when I swipe through the repeater items from right to left but not from left to right as shown in the animation below:
gif: animation of anomalous behavior
Can anybody offer a possible explanation? Is this a possible bug? I am using Qt Creator 13.0.0 based on Qt 6.6.0 (GCC 10.3.1 20210422 (Red Hat 10.3.1-1), x86_64)
Thanks!
-
The QML code is
import QtQuick import QtQuick.Controls Window { width: 640 height: 250 visible: true title: qsTr("Mac OS Dock Examples") Column { Slider { id: foff from: 1 to: 5 stepSize: 1 value: 2 snapMode: Slider.SnapAlways visible: false } Slider { id: sf from: 0.5 to: 2.5 stepSize: 0.5 value: 0.5 snapMode: Slider.SnapAlways visible: false } Slider { id: dmp from: 1 to: 5 stepSize: 1 value: 1 snapMode: Slider.SnapAlways visible: false } } Row { id: row anchors.bottom: parent.bottom anchors.bottomMargin: 30 anchors.horizontalCenter: parent.horizontalCenter property int falloff: foff.value // how many adjacent elements are affected property int current: -1 property real scaleFactor: sf.value // that's how much extra it scales property real damp: dmp.value // decay of influence Repeater { id: iconRepeater model: 10 Rectangle { width: 50 * pseudoScale height: width anchors.bottom: parent.bottom color: "red" border.color: "black" property real pseudoScale: { if (row.current == -1) return 1 else { var diff = Math.abs(index - row.current) diff = Math.max(0, row.falloff - diff) var damp = row.falloff - Math.max(1, diff) var sc = row.scaleFactor if (damp) sc /= damp * row.damp diff = diff / row.falloff * sc + 1 return diff } } MouseArea { id: mouseArea anchors.fill: parent hoverEnabled: true onContainsMouseChanged: row.current = containsMouse ? index : -1 } Behavior on pseudoScale { PropertyAnimation { duration: 150 } } } } } Row { anchors { top: parent.top horizontalCenter: parent.horizontalCenter } Repeater { id: rep model: ['red', 'yellow', 'pink', 'green', 'teal', 'orchid', 'blue', 'orange'] property int currentIndex: -10 delegate: Rectangle { anchors.top: parent.top // Calculate the width depending on the currently hovered element width: (rep.currentIndex === index ? 100 : ((rep.currentIndex - index) === 1 || (rep.currentIndex - index) === -1 ? 80 : 50)) height: width radius: width / 2 color: modelData MouseArea { anchors.fill: parent hoverEnabled: true // onEntered/Exited did not react. This will work. onContainsMouseChanged: { if (containsMouse) rep.currentIndex = index else rep.currentIndex = -10 // -10 is safe } } // Makes the movement smooth Behavior on width { NumberAnimation {} } } } } }
with the main file
#include <QGuiApplication> #include <QQmlApplicationEngine> int main(int argc, char *argv[]) { QGuiApplication app(argc, argv); QQmlApplicationEngine engine; const QUrl url(QStringLiteral("qrc:/MacDockOrig/Main.qml")); QObject::connect( &engine, &QQmlApplicationEngine::objectCreationFailed, &app, []() { QCoreApplication::exit(-1); }, Qt::QueuedConnection); engine.load(url); return app.exec(); }