QML: a SwipeView inside a Rectangle

[mentalmushroom]

I've been trying to place a SwipeView with two pages inside a Rectangle and indent it by 20 pixels from each side:

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
 
ApplicationWindow 
{
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
 
    Column
    {
        anchors.fill: parent
        //anchors.margins: 20
 
        Rectangle
        {
            id: yellowRect
            color: "yellow"
            width: parent.width
            height: parent.height - tabBar.height
            //anchors.fill: parent
            //anchors.margins: 20
 
            SwipeView
            {
                id: swipeView
                //parent: yellowRect
                //anchors.fill: yellowRect//parent
                anchors.margins: 20
                anchors.fill: parent
                currentIndex: tabBar.currentIndex
 
                Page
                {
                    //width: 300
                    //height: 300
                    //anchors.fill: parent
                    //anchors.margins: 20
                    Column
                    {
                        Label { text: "First page" }
                        TextField { }
                    }
                }
 
                Page
                {
                    //anchors.fill: parent
                    //anchors.margins: 20
                    //width: 300
                    //height: 300
                    Label {
                        text: qsTr("Second page")
                        anchors.centerIn: parent
                    }
                }
            }   // Swipeview
        } // Rectangle
 
        TabBar
        {
            id: tabBar
            TabButton { text: "First" }
            TabButton { text: "Second" }
        }
    } // Column
} // ApplicationWindow

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

ApplicationWindow 
{
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Column
    {
        anchors.fill: parent
        //anchors.margins: 20

        Rectangle
        {
            id: yellowRect
            color: "yellow"
            width: parent.width
            height: parent.height - tabBar.height
            //anchors.fill: parent
            //anchors.margins: 20

            SwipeView
            {
                id: swipeView
                //parent: yellowRect
                //anchors.fill: yellowRect//parent
                anchors.margins: 20
                anchors.fill: parent
                currentIndex: tabBar.currentIndex

                Page
                {
                    //width: 300
                    //height: 300
                    //anchors.fill: parent
                    //anchors.margins: 20
                    Column
                    {
                        Label { text: "First page" }
                        TextField { }
                    }
                }

                Page
                {
                    //anchors.fill: parent
                    //anchors.margins: 20
                    //width: 300
                    //height: 300
                    Label {
                        text: qsTr("Second page")
                        anchors.centerIn: parent
                    }
                }
            }   // Swipeview
        } // Rectangle

        TabBar
        {
            id: tabBar
            TabButton { text: "First" }
            TabButton { text: "Second" }
        }
    } // Column
} // ApplicationWindow

To copy to clipboard, switch view to plain text mode 

The code above produces the following:
Знімок екрана 2017-01-30 12.09.41.jpg
Знімок екрана 2017-01-30 12.09.52.jpg

In particular, there is no indent on the right when the first page is active or the left when the second page is active.

How can I fix that?

[anda_skoa]

That could be the pages being drawn outside the parent.

You could check by enabling clipping on the parent/view.

Cheers,
_