QML SwipeView is covering entire window

pra7

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:

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

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

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

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

Yashpal

@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

pra7

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

Yashpal

@pra7 said in QML SwipeView is covering entire window:

w

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