Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

How to use SwipeView and ListView together?



  • Hi all,

    I want to use SwipeView and ListView together, it means, in a page, if I swipe left and right, it would change to previous or next page; otherwise, if I scroll up and down, the content in list view would scroll up and down too. Now I just can scroll up and down.
    I'm using Qt 14.0
    This is my implement code:

        SwipeView {
            id: swipeView
            anchors { top: header.bottom; bottom: parent.bottom; left: parent.left; right: parent.right }
            currentIndex: 0
    
            Repeater {
                id: repeater
                model: totalPage
                Loader {
                   sourceComponent: QuizzPage {
                    }
                    active: SwipeView.isCurrentItem
                    onLoaded: {
                        console.log("Done load"+ index);
                    }
                }
            }
        }
    

    Thank you



  • ListView inherits from Flickable and Flickable has flickableDirection. Try to use flickableDirection: Flickable.VerticalFlick in your ListView
    flickableDirection: Flickable.VerticalFlick is default in ListView



  • Try this example it uses a swipe view and ListView

    • tested on Android Mobile and Desktop

    import QtQuick 2.14
    import QtQuick.Controls 2.14
    import QtQuick.Layouts 1.14
    import QtQml.Models 2.14

    ApplicationWindow {
    id: root
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    SwipeView {
        anchors.fill: parent
        currentIndex: 1
        ListView {
            spacing: 5
            Layout.fillHeight: true
            Layout.fillWidth: true
            model: model
            delegate: Rectangle {
                width: root.width
                height: 75
                color: "steelblue"
            }
        }
        ListView {
            spacing: 5
            Layout.fillHeight: true
            Layout.fillWidth: true
            model: model
            delegate: Rectangle {
                width: root.width
                height: 75
                color: "red"
            }
        }
        ListView {
            spacing: 5
            Layout.fillHeight: true
            Layout.fillWidth: true
            model: model
            delegate: Rectangle {
                width: root.width
                height: 75
                color: "yellow"
            }
        }
    }
    ListModel {
        //just a model with some elements
        id: model
        ListElement {}
        ListElement {}
        ListElement {}
        ListElement {}
        ListElement {}
        ListElement {}
        ListElement {}
        ListElement {}
        ListElement {}
        ListElement {}
        ListElement {}
        ListElement {}
    }
    

    }


Log in to reply