QML SwipeView is covering entire window



  • I am having some problems if i use swipe view and i have written following code:

    import QtQuick 2.6
    import QtQuick.Window 2.2
    import QtQuick.Controls 2.2
    
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Swipe View")
    
        MainForm {
            anchors.fill:parent
    
            Rectangle{
                id:rightRect
                anchors.right:parent.right
                width: parent.width*0.50
                height:parent.height
                color:"yellow"
            }
    
            Rectangle{
                id:leftRect
                width:parent.width*0.50
                height:parent.height
                color:"lightgreen"
                border.color:"red"
                anchors.right:rightRect.left
                SwipeView{
                    id:swipeView
                    anchors.fill : leftRect
                    //Layout.fillWidth: true
                    currentIndex: 0
                    interactive: false
                    Page{
                        id:page1
    
                        Rectangle{
                            width:parent.width
                            height:parent.height
                            color:"lightgreen"
                            Button{
                                text:"move to 2"
                                onClicked: swipeView.currentIndex = 1
                            }
                        }
                    }
    
                    Page{
                        id:page2
                        Rectangle{
                            width:parent.width
                            height:parent.height
                            color:"lightblue"
                            Button{
                                text:"move to 1"
                                onClicked: swipeView.currentIndex = 0
                            }
                        }
                    }
                }
            }
        }
    }
    

    Below are the screen shots:

    1. Initially i have set current index to "0" but index "1" blue area is visible and it's covering the right area(Yellow rectangle):

    enter image description here

    1. if I click on move to 2 button then the yellow rect is visible as expected.

    enter image description here

    Now, Even if I click on move to 1 button I need same behavior ie., yellow rect should be visible all the time.How to achieve this ??



  • @pra7 That's how SwipeView works. It loads all the pages inside Swipe still, you can control this with Loader making only currentItem to be visible. You can check out an example of it in https://doc.qt.io/qt-5/qml-qtquick-controls2-swipeview.html



  • @Yashpal .. I Found the answer i should use clip ie.,

    Rectangle{
                id:leftRect
                width:parent.width*0.50
                height:parent.height
                color:"lightgreen"
                border.color:"red"
                anchors.right:rightRect.left
                clip:true    //added this
                SwipeView{
    


  • @pra7 said in QML SwipeView is covering entire window:

    w

    That's cool. This solution you came up with is perfect.



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