4

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

pra7
  • 834
  • 2
  • 21
  • 50

1 Answers1

8

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.

Abhishek Agarwal
  • 1,190
  • 2
  • 19
  • 38
  • If I add clip it is working as expected, But is there any way to disable transition when the index is changed ?? – pra7 Jul 26 '17 at 10:08
  • Which index are you referring to? – Abhishek Agarwal Jul 26 '17 at 10:44
  • SwipeView -> when i set this **swipeView.currentIndex** there is some transition/animation happening . – pra7 Jul 26 '17 at 13:39
  • I believe your problem is listed on Qt forum: https://forum.qt.io/topic/81535/swipeview-page-change-without-animation Unfortunately there is no way to do this using only SwipeView as mentioned in the above link. – Abhishek Agarwal Jul 27 '17 at 03:36
  • Thanks and I have already referred above link, Hope will get an option in the next version. – pra7 Jul 27 '17 at 05:48
  • 1
    @pra7 Take a look at [`StackLayout`](https://doc.qt.io/qt-5/qml-qtquick-layouts-stacklayout.html) that does the same thing as `SwipeView`but without animation when you change the `currentIndex`. – Blabdouze Jul 27 '17 at 14:26
  • @Blabdouze .. Thanks for the suggestion, I will try StackLayout. – pra7 Jul 27 '17 at 14:40