Solved StackView of fixed size, sub views not getting clipped
-
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?
-
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 }}) } } } } }