How to use SwipeView and ListView together?

Quang Phu

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

werto87

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

werto87

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 {}
}

}