StackView of fixed size, sub views not getting clipped

[kloffy]

I want to freely position a StackView of fixed size in my QML interface. It seems that StackView assumes it will always occupy the entire window ("anchors.fill: parent") and therefore the sub view are not clipped. This is especially problematic during transitions, when the views are fully visible as they slide in and out of the designated content area. Here is an example to illustrate what I am talking about:

import QtQuick 2.5
import QtQuick.Controls 1.4

Item {
	width: 800; height: 600
	
	ListModel {
		id: fruitModel

		ListElement {
			title: "Apple"
			color: "green"
		}
		ListElement {
			title: "Orange"
			color: "orange"
		}
		ListElement {
			title: "Banana"
			color: "yellow"
		}
	}

	StackView {
		id: aStackView
		x: 200; y: 0
		width: 400; height: 600

		initialItem: ListView {
			model: fruitModel
			delegate: Item {
				width: parent.width; height: 80
				Rectangle {
					anchors.fill: parent
					color: "red"
					Text {
						anchors.fill: parent
						color: "black"
						text: title
					}
				}
				MouseArea {
					id: mouse
					anchors.fill: parent
					onClicked: aStackView.push({ item: Qt.resolvedUrl("FruitView.qml"), properties: { text: title, color: color }})
				}
			}
		}
	}
}

And for completeness, here is FruitView.qml:

import QtQuick 2.2

Item {
	id: root
	
	property alias text: aText.text
	property alias color: aRectangle.color

	Rectangle {
		id: aRectangle
		anchors.fill: parent
		color: "red"
	}
	
	Text {
		id: aText
		anchors.fill: parent
		font.pixelSize: 32
	}
}

What is the best way to rectify this?

[kloffy]

Ok, I found a solution: Surround your StackView with an Item and set clip to true.

Item {
	x: 200; y: 0
    width: 400; height: 600
    clip: true

	StackView {
		id: aStackView

		initialItem: ListView {
			model: fruitModel
			delegate: Item {
				width: parent.width; height: 80
				Rectangle {
					anchors.fill: parent
					color: "red"
					Text {
						anchors.fill: parent
						color: "black"
						text: title
					}
				}
				MouseArea {
					id: mouse
					anchors.fill: parent
					onClicked: aStackView.push({ item: Qt.resolvedUrl("FruitView.qml"), properties: { text: title, color: color }})
				}
			}
		}
	}
}