Can We have a SwipeView by using PathView?

391 Views Asked by At

In QML Swipe View is not bidirectional.So I need a swipe view A code sample will be very beneficial for me. I need to keep only 3 items in my view & at a time only item should be visible & on swiping the view in either way left or right element should be on center.

1

There are 1 best solutions below

1
On

This code solves half problem That is why I posted as answer

import QtQuick 2.0

Item {
    property alias model: view.model
    property alias delegate: view.delegate
    property alias currentIndex: view.currentIndex
    property real itemHeight: 60

    clip: true

    PathView {
        id: view
        anchors.fill: parent
        snapMode: PathView.NoSnap
        pathItemCount: height/itemHeight
        preferredHighlightBegin: 0.5
        preferredHighlightEnd: 0.5
        dragMargin: view.width/5
        path: Path {
            startY: view.width/4; startX:-itemHeight/2 -50
            PathLine { y: view.width/4; x: (view.pathItemCount*itemHeight + 3*itemHeight) }
        }
    }
}

And this is My Item :

Item{
    id:widgetMain
    width :480
    height : 240
    property int  delegateHeight: widgetMain.height
    property int delegateWidth : widgetMain.width
    Spinner {
        id: spinner
        width: parent.width;
        height: parent.height;
        focus: true
        model: ["qrc:/Tile1.qml",
            "qrc:/Tile2.qml"
            ,"qrc:/Tile3.qml"]
        itemHeight: 150

        delegate: Loader {
            width: delegateWidth
            height: delegateHeight
            source: modelData
        }
    }
}

Now If I swipe towards any direction, It shows only 1 tile in the view. & When my drag reaches to half way, then the tile removes & shifts to last.

Here I want to display that one tile is swiping & 2nd tile is coming from behind(Just like a Swipe view).

Now can you help me please?