Search code examples
qtqmlqtquick2qtquickcontrolsqtquickcontrols2

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

2) 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 ??

Solution

  • Add clip:true to the parent of your SwipeView and it will be good.

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

    According to Qt Documentation

    If clipping is enabled, an item will clip its own painting, as well as the painting of its children, to its bounding rectangle.

    By default this value is false hence your SwipeView goes out of the rectangle area.