SwipeView inside of SwipeView

Izba

Hello everyone,

Is it possible to place swipeview inside of another swipeview?

I would like to create navigation panel that has 2 or more pages in horizontal view and all those pages would have vertical swipeview inside with a 3 child pages. Is this possible?

Here is what i have tried so far:

SwipeView{
        id: mainView
        orientation: Qt.Horizontal
        Page{
        id: Horizontal1;
        anchors.fill:parent;
        SwipeView {
            id: Hor1
            orientation: Qt.Vertical

            Page {
                id: topPage1

                header: Label {
                    text: qsTr("TopPage1")
                    font.pixelSize: Qt.application.font.pixelSize * 2
                    padding: 10
                }

                Label {
                    text: qsTr("You are on topPage 1.")
                    anchors.centerIn: parent
                }
            }

            Page {
                id: midPage1

                header: Label {
                    text: qsTr("MidPage1")
                    font.pixelSize: Qt.application.font.pixelSize * 2
                    padding: 10
                }

                Label {
                    text: qsTr("You are on midPage 1.")
                    anchors.centerIn: parent
                }
            }

            Page {
                id: botPage1
                header: Label {
                    text: qsTr("botPage1")
                    font.pixelSize: Qt.application.font.pixelSize * 2
                    padding: 10
                }

                Label {
                    text: qsTr("You are on botPage 1.")
                    anchors.centerIn: parent
                }
            }
        }
        }

     Page{
         id: Horizontal2;
         anchors.fill:parent;
    SwipeView {
        id: hor2
        orientation: Qt.Vertical

        Page {
            id: topPage2

            header: Label {
                text: qsTr("TopPage2")
                font.pixelSize: Qt.application.font.pixelSize * 2
                padding: 10
            }

            Label {
                text: qsTr("You are on topPage 2.")
                anchors.centerIn: parent
            }
        }

        Page {
            id: midPage2
            header: Label {
                text: qsTr("Player")
                font.pixelSize: Qt.application.font.pixelSize * 2
                padding: 10
            }

            Label {
                text: qsTr("You are on midPage 2")
                anchors.centerIn: parent
            }
        }

        Page {
            id: botPage2

            header: Label {
                text: qsTr("BotPage2")
                font.pixelSize: Qt.application.font.pixelSize * 2
                padding: 10
            }

            Label {
                text: qsTr("You are on botPage 2.")
                anchors.centerIn: parent
            }
        }
    }
  }
}

Thanks,
Izba

jpnurmi

First of all, make sure the code you present actually runs:

QQmlApplicationEngine failed to load component
IDs cannot start with an uppercase letter

It's best to make the example minimal but runnable and standalone, and not leave out the import statements.

The problem, in a nutshell, is that you are not anchoring the SwipeViews at all, so the SwipeViews have no geometry to operate within. Furthermore, you are incorrectly anchoring the Pages inside SwipeViews, which in turn prevents SwipeView from managing the geometry of the pages:

QML Page: SwipeView has detected conflicting anchors. Unable to layout the item.

Here's a simple standalone example:

import QtQuick 2.9
import QtQuick.Controls 2.2

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

    SwipeView {
        anchors.fill: parent
        orientation: Qt.Horizontal

        Repeater {
            model: 3

            Page {
                header: Label { text: "H" + index; horizontalAlignment: Qt.AlignHCenter }

                SwipeView {
                    anchors.fill: parent
                    orientation: Qt.Vertical

                    Repeater {
                        model: 3

                        Page {
                            Label { text: "V" + index; anchors.centerIn: parent }
                        }
                    }
                }
            }
        }
    }
}

wgrs33

Hello everyone,

@jpnurmi
Referring to your example: what is the position and the size of a Page inside the SwipeView? As you said SwipeView doesn't have a geometry, so when I try to refer to Page's parent, where it points exactly? Qt says that Page's parent is an Item with undefined id.

Can a SwipeView limit somehow the size and position of a Page or I need to treat it like it will always refer to the screen's x=0 and y=0?

Thanks,
wgrs33