SwipeView inside of SwipeView



  • 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



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

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.