How to implement swipeview QtQuick 2.5

Question

I have QT 5.5 and it won't support SwipeView. I tried doing with listView but I am not getting what I expected. I want a similar functionality code in QT 5.5 like the code given below which is written in QT 5.6. Please help

import QtQuick 2.6
import QtQuick.Controls 2.0
import QtQuick.Window 2.0
Window {
    visible: true
    width: 200
    height: 400
    title: qsTr("Hello World")

    id: page

    SwipeView {
        id: swipeView
        anchors.fill: parent
        currentIndex: 0
        Page {
                    Label {
                        text: qsTr("First page")
                        anchors.centerIn: parent
                    }
                }
        Page {
                    Label {
                        text: qsTr("Second page")
                        anchors.centerIn: parent
                    }
                }
        Page {
                    Label {
                        text: qsTr("Third page")
                        anchors.centerIn: parent
                    }
                }
        Page {
                    Label {
                        text: qsTr("Fourth page")
                        anchors.centerIn: parent
                    }
                }
        Page {
                    Label {
                        text: qsTr("Fifth page")
                        anchors.centerIn: parent
                    }
                }
    }



    Rectangle
    {
        id:minus
        width:parent.width/2
        height:100
        anchors.left:parent.left
        anchors.bottom:parent.bottom
        color:"red"
        MouseArea
        {
            anchors.fill:parent
            onClicked:{
                if(swipeView.currentIndex>0)
                    swipeView.currentIndex--
            }
        }
    }
    Rectangle
    {
        id:plus
        width:parent.width/2
        height:100
        anchors.right:parent.right
        anchors.bottom:parent.bottom
        color:"green"
        MouseArea
        {
            anchors.fill:parent
            onClicked:{
                if(swipeView.currentIndex<4)
                    swipeView.currentIndex++
            }
        }
    }


}

Have you tried tabview? I think tabview with customized style would meet your needs. — Jimmy Chen, Jun 05 '17 at 11:09

Yoann Quenach de Quivillic · Answer 1 · 2017-06-08T12:39:40.050

If you cannot update your Qt version, you can indeed approximate a SwipeView using a ListView, a VisualItemModel, and a default qml property.

SwipeView.qml

ListView
{
    id: root

    // Allow to add pages as you would for a QtQuick.Controls 2 SwipeView
    // Each item you declare in your SwipeView will be reparented to itemModel
    default property alias items: itemModel.children

    // SwipeView is horizontal
    orientation: Qt.Horizontal

    // Hide out of bounds pages
    clip: true

    // Do not stop between two pages
    snapMode: ListView.SnapToItem

    // Update currentIndex as you swipe through the pages
    highlightRangeMode: ListView.StrictlyEnforceRange

    model: VisualItemModel {
        id: itemModel
        // Used to bind the pages size to the swipeView size
        onChildrenChanged: {
            for(var i=0;i<children.length; i++)
            {
                children[i].width = Qt.binding(function(){return root.width})
                children[i].height = Qt.binding(function(){return root.height})
            }
        }
    }

}

Page.qml

Item {
    property string title

    Rectangle
    {
        anchors.fill: parent
        border.width: 1
    }

    Text
    {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: 20
        text: title
    }
}

PageIndicator.qml

Row
{
    id: root

    property int count
    property int currentIndex
    property Component delegate: bullet
    property bool interactive
    spacing: 5

    Component
    {
        id: bullet
        Rectangle
        {
            height: 10
            width: height
            radius: height/2
            color:"black"
            opacity: currentIndex==index?0.8:0.2
        }
    }

    Repeater
    {
        model: root.count
        Loader
        {
            property int index: model.index
            sourceComponent: delegate
        }
    }
}

main.qml

import QtQuick 2.5
import QtQuick.Controls 1.4

ApplicationWindow
{
    id: window
    visible: true
    width: 300
    height: 300

    SwipeView
    {
        id: swipeView
        anchors.fill: parent
        Page
        {
            title: "Page 1"
        }
        Page
        {
            title: "Page 2"
        }
        Page
        {
            title: "Page 3"
        }
    }

    PageIndicator
    {
        id: pageIndicator
        anchors.bottom: swipeView.bottom
        anchors.bottomMargin: 10
        anchors.horizontalCenter: swipeView.horizontalCenter
        count: swipeView.count
        currentIndex: swipeView.currentIndex
    }
}

score 0 · Answer 2 · answered Jun 06 '17 at 06:40

Qt Quick Controls 2 was introduced in Qt 5.7:

Qt Quick Controls 2 provides a set of controls that can be used to build complete interfaces in Qt Quick. The module was introduced in Qt 5.7.

Qt Labs Controls was introduced in Qt 5.6, so the code that you referenced would have to use the Qt.labs.controls 1.0 import in order to run with Qt 5.6.

You need to use a newer Qt version (5.6 or newer).

How to implement swipeview QtQuick 2.5

2 Answers2